@epoch32/visage 1.1.2 → 1.1.4

package/dist/devtools/index.js

@@ -1,4768 +1,20 @@
-// src/signals/types.ts
-var SubscriberState;
-((SubscriberState) => {
-  SubscriberState[SubscriberState["CLEAN"] = 0] = "CLEAN";
-  SubscriberState[SubscriberState["CHECK_DIRTY"] = 1] = "CHECK_DIRTY";
-  SubscriberState[SubscriberState["DIRTY"] = 2] = "DIRTY";
-  SubscriberState[SubscriberState["DISPOSED"] = 3] = "DISPOSED";
-})(SubscriberState ||= {});
-var SIGNAL_BRAND = Symbol("visage.signal");
-var COMPUTED_BRAND = Symbol("visage.computed");
-function isSignal(value) {
-  return typeof value === "function" && ((SIGNAL_BRAND in value) || (COMPUTED_BRAND in value));
-}
-
-// src/signals/system.ts
-var currentSubscriber = null;
-var currentScope = null;
-var batchDepth = 0;
-var pendingEffects = new Set;
-var warnedCyclicSubscribers = new WeakSet;
-var isFlushing = false;
-function setCurrentSubscriber(sub) {
-  currentSubscriber = sub;
-}
-function setCurrentScope(scope) {
-  currentScope = scope;
-}
-function getCurrentScope() {
-  return currentScope;
-}
-function addPendingEffect(eff) {
-  pendingEffects.add(eff);
-}
-function removePendingEffect(eff) {
-  pendingEffects.delete(eff);
-}
-var MAX_FLUSH_COUNT = 100;
-function flushEffects() {
-  if (isFlushing || batchDepth > 0)
-    return;
-  isFlushing = true;
-  let iterations = 0;
-  try {
-    while (pendingEffects.size > 0) {
-      if (++iterations > MAX_FLUSH_COUNT) {
-        pendingEffects.clear();
-        throw new Error(`[Visage Reactivity] Maximum update depth exceeded (${MAX_FLUSH_COUNT} cycles). ` + `An effect continuously triggered state mutations (infinite loop detected). ` + `Ensure effects that modify signals do not unconditionally depend on them, or use untrack() to read state.`);
-      }
-      const effectsToRun = Array.from(pendingEffects);
-      pendingEffects.clear();
-      for (const eff of effectsToRun) {
-        if (eff.state === 2 /* DIRTY */ || eff.state === 1 /* CHECK_DIRTY */) {
-          eff.run();
-        }
-      }
-    }
-  } finally {
-    isFlushing = false;
-  }
-}
-function batch(fn) {
-  batchDepth++;
-  try {
-    return fn();
-  } finally {
-    batchDepth--;
-    if (batchDepth === 0) {
-      flushEffects();
-    }
-  }
-}
-function untrack(fn) {
-  const prev = currentSubscriber;
-  currentSubscriber = null;
-  try {
-    return fn();
-  } finally {
-    currentSubscriber = prev;
-  }
-}
-
-// src/signals/computed.ts
-class Computed {
-  [COMPUTED_BRAND] = true;
-  _fn;
-  _value;
-  _subscribers = new Set;
-  sources = new Set;
-  sourceVersions = new Map;
-  state = 2 /* DIRTY */;
-  scope;
-  version = 0;
-  constructor(fn) {
-    this._fn = fn;
-    this.scope = currentScope;
-    if (currentScope) {
-      currentScope.addSubscriber(this);
-    }
-  }
-  get() {
-    if (this.state === 3 /* DISPOSED */) {
-      return this._fn();
-    }
-    if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
-      this._subscribers.add(currentSubscriber);
-      currentSubscriber.sources.add(this);
-      currentSubscriber.sourceVersions.set(this, this.version);
-    }
-    if (this.state === 2 /* DIRTY */ || this.state === 1 /* CHECK_DIRTY */) {
-      this.updateIfNecessary();
-    }
-    return this._value;
-  }
-  get value() {
-    return this.get();
-  }
-  removeSubscriber(sub) {
-    this._subscribers.delete(sub);
-  }
-  markDirty(targetState = 1 /* CHECK_DIRTY */) {
-    if (this.state >= targetState || this.state === 3 /* DISPOSED */) {
-      return;
-    }
-    this.state = targetState;
-    for (const sub of this._subscribers) {
-      sub.markDirty(1 /* CHECK_DIRTY */);
-    }
-  }
-  updateIfNecessary() {
-    if (this.state === 2 /* DIRTY */) {
-      const prev = this._value;
-      this.recompute();
-      return !Object.is(prev, this._value);
-    }
-    if (this.state === 1 /* CHECK_DIRTY */) {
-      let anyChanged = false;
-      for (const source of this.sources) {
-        if (source instanceof Computed) {
-          source.updateIfNecessary();
-        }
-        const lastVersion = this.sourceVersions.get(source);
-        if (lastVersion !== undefined && lastVersion !== source.version) {
-          anyChanged = true;
-        }
-      }
-      if (anyChanged) {
-        const prev = this._value;
-        this.recompute();
-        return !Object.is(prev, this._value);
-      }
-      this.state = 0 /* CLEAN */;
-      return false;
-    }
-    return false;
-  }
-  recompute() {
-    this.cleanupSources();
-    const prevSubscriber = currentSubscriber;
-    setCurrentSubscriber(this);
-    const prevScope = currentScope;
-    setCurrentScope(this.scope);
-    try {
-      const next = this._fn();
-      if (!Object.is(this._value, next)) {
-        this._value = next;
-        this.version++;
-      }
-      this.state = 0 /* CLEAN */;
-    } finally {
-      setCurrentSubscriber(prevSubscriber);
-      setCurrentScope(prevScope);
-    }
-  }
-  cleanupSources() {
-    for (const source of this.sources) {
-      source.removeSubscriber(this);
-    }
-    this.sources.clear();
-    this.sourceVersions.clear();
-  }
-  dispose() {
-    if (this.state === 3 /* DISPOSED */)
-      return;
-    this.state = 3 /* DISPOSED */;
-    this.cleanupSources();
-    this._subscribers.clear();
-  }
-}
-function computed(fn, options) {
-  const isInternal = options?.internal ?? false;
-  const customName = options?.name;
-  const c = new Computed(fn);
-  const accessor = () => c.get();
-  Object.defineProperties(accessor, {
-    [COMPUTED_BRAND]: { value: true },
-    get: { value: () => c.get() },
-    value: { get: () => c.get() }
-  });
-  if (!isInternal && typeof window !== "undefined" && window.__VISAGE_DEVTOOLS__) {
-    const devtools = window.__VISAGE_DEVTOOLS__;
-    const sigId = devtools.registerSignal({
-      name: customName,
-      type: "computed",
-      getValue: () => c.get(),
-      version: () => c.version,
-      subscribersCount: () => c._subscribers?.size ?? 0,
-      dependencies: () => Array.from(c.sources ?? []).map((src) => src._devId).filter(Boolean),
-      dependents: () => Array.from(c._subscribers ?? []).map((sub) => sub._devId).filter(Boolean)
-    });
-    c._devId = sigId;
-    if (currentScope) {
-      currentScope.addCleanup(() => {
-        devtools.unregisterSignal(sigId);
-      });
-    }
-  }
-  return accessor;
-}
-var createMemo = computed;
-// src/style/cx.ts
-function hasReactiveClass(val) {
-  if (typeof val === "function")
-    return true;
-  if (Array.isArray(val)) {
-    for (let i = 0;i < val.length; i++) {
-      if (hasReactiveClass(val[i]))
-        return true;
-    }
-    return false;
-  }
-  if (typeof val === "object" && val !== null) {
-    for (const k in val) {
-      if (typeof val[k] === "function")
-        return true;
-    }
-  }
-  return false;
-}
-function normalizeClass(val) {
-  if (!val)
-    return "";
-  if (typeof val === "function")
-    return normalizeClass(val());
-  if (typeof val === "string")
-    return val.trim();
-  if (typeof val === "number")
-    return String(val);
-  if (Array.isArray(val)) {
-    let res = "";
-    for (let i = 0;i < val.length; i++) {
-      const item = typeof val[i] === "function" ? val[i]() : val[i];
-      const itemStr = normalizeClass(item);
-      if (itemStr) {
-        res = res ? `${res} ${itemStr}` : itemStr;
-      }
-    }
-    return res;
-  }
-  if (typeof val === "object") {
-    let res = "";
-    for (const key in val) {
-      const condition = typeof val[key] === "function" ? val[key]() : val[key];
-      if (condition) {
-        res = res ? `${res} ${key}` : key;
-      }
-    }
-    return res;
-  }
-  return "";
-}
-function cx(...args) {
-  return normalizeClass(args);
-}
-
-// src/style/scale.ts
-var UNITLESS_PROPERTIES = new Set([
-  "animationIterationCount",
-  "aspectRatio",
-  "borderImageSlice",
-  "columnCount",
-  "columns",
-  "flex",
-  "flexGrow",
-  "flexShrink",
-  "flexOrder",
-  "fontWeight",
-  "lineHeight",
-  "opacity",
-  "order",
-  "orphans",
-  "scale",
-  "tabSize",
-  "widows",
-  "zIndex",
-  "zoom",
-  "fillOpacity",
-  "strokeOpacity"
-]);
-var DIMENSION_KEYWORDS = {
-  screen: "100dvh",
-  "screen-h": "100dvh",
-  "screen-w": "100dvw",
-  full: "100%",
-  half: "50%",
-  third: "33.333333%",
-  "two-thirds": "66.666667%",
-  quarter: "25%",
-  "three-quarters": "75%",
-  auto: "auto",
-  min: "min-content",
-  max: "max-content",
-  fit: "fit-content"
-};
-function space(val) {
-  if (val === undefined || val === null || val === "")
-    return "";
-  if (typeof val === "number") {
-    if (val === 0)
-      return "0px";
-    return `${val * 4}px`;
-  }
-  const str = String(val).trim();
-  if (str in DIMENSION_KEYWORDS) {
-    return DIMENSION_KEYWORDS[str];
-  }
-  return str;
-}
-function resolveDimension(val) {
-  if (val === undefined || val === null || val === "")
-    return "";
-  if (typeof val === "number") {
-    if (val === 0)
-      return "0px";
-    if (val > 48)
-      return `${val}px`;
-    return `${val * 4}px`;
-  }
-  const str = String(val).trim();
-  if (str in DIMENSION_KEYWORDS) {
-    return DIMENSION_KEYWORDS[str];
-  }
-  return str;
-}
-function px(val) {
-  return `${val}px`;
-}
-function rem(val) {
-  return `${val}rem`;
-}
-function em(val) {
-  return `${val}em`;
-}
-function fluid(minPx, maxPx, options) {
-  const minVw = options?.minVw ?? 375;
-  const maxVw = options?.maxVw ?? 1280;
-  const slope = (maxPx - minPx) / (maxVw - minVw);
-  const yIntercept = -minVw * slope + minPx;
-  const slopeVw = slope * 100;
-  const preferred = `${yIntercept.toFixed(2)}px + ${slopeVw.toFixed(2)}vw`;
-  const min = Math.min(minPx, maxPx);
-  const max = Math.max(minPx, maxPx);
-  return `clamp(${min}px, ${preferred}, ${max}px)`;
-}
-var SHADOW_PRESETS = {
-  none: "none",
-  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
-  soft: "0 8px 30px rgba(0, 0, 0, 0.06)",
-  glow: "0 0 24px rgba(168, 85, 247, 0.35)",
-  inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)"
-};
-function shadow(variant) {
-  if (variant in SHADOW_PRESETS) {
-    return SHADOW_PRESETS[variant];
-  }
-  return variant;
-}
-var RADIUS_PRESETS = {
-  none: "0px",
-  sm: "4px",
-  md: "8px",
-  lg: "12px",
-  xl: "16px",
-  "2xl": "20px",
-  "3xl": "24px",
-  full: "9999px"
-};
-function radius(variant) {
-  if (typeof variant === "number") {
-    return `${variant}px`;
-  }
-  if (variant in RADIUS_PRESETS) {
-    return RADIUS_PRESETS[variant];
-  }
-  return String(variant);
-}
-function glass(options = {}) {
-  const blurVal = typeof options.blur === "number" ? `${options.blur}px` : options.blur ?? "20px";
-  const tintVal = options.tint ?? "rgba(255, 255, 255, 0.65)";
-  const borderVal = options.border ?? "1px solid rgba(255, 255, 255, 0.75)";
-  return {
-    backdropFilter: `blur(${blurVal})`,
-    WebkitBackdropFilter: `blur(${blurVal})`,
-    backgroundColor: tintVal,
-    border: borderVal
-  };
-}
-function formatStyleProp(prop, val) {
-  if (val === null || val === undefined || val === "")
-    return "";
-  if (typeof val === "number") {
-    if (val === 0 || UNITLESS_PROPERTIES.has(prop)) {
-      return String(val);
-    }
-    return `${val}px`;
-  }
-  const str = String(val).trim();
-  if (str in DIMENSION_KEYWORDS) {
-    const lowerProp = prop.toLowerCase();
-    if (str === "screen") {
-      if (lowerProp.includes("width"))
-        return "100dvw";
-      return "100dvh";
-    }
-    return DIMENSION_KEYWORDS[str];
-  }
-  return str;
-}
-
-// src/dom/render.ts
-function isReactive(value) {
-  return isSignal(value) || typeof value === "function";
-}
-function resolveValue(val) {
-  if (typeof val === "function") {
-    return val();
-  }
-  return val;
-}
-function render(fn, container) {
-  return createRoot((dispose) => {
-    container.textContent = "";
-    const node = insertChild(container, fn());
-    onCleanup(() => {
-      if (node && node instanceof Node && node.parentNode === container) {
-        container.removeChild(node);
-      }
-    });
-    return dispose;
-  });
-}
-function setAttribute(el, key, value) {
-  if (key.startsWith("on") && typeof value === "function") {
-    const eventName = key.startsWith("onCapture") ? key.slice(9).toLowerCase() : key.slice(2).toLowerCase();
-    const useCapture = key.startsWith("onCapture");
-    el.addEventListener(eventName, value, useCapture);
-    onCleanup(() => {
-      el.removeEventListener(eventName, value, useCapture);
-    });
-    return;
-  }
-  if (key === "ref" && typeof value === "function") {
-    value(el);
-    return;
-  }
-  if (key === "class" || key === "className") {
-    if (hasReactiveClass(value)) {
-      effect(() => {
-        const cls = normalizeClass(value);
-        if (cls)
-          el.setAttribute("class", cls);
-        else
-          el.removeAttribute("class");
-      });
-    } else {
-      const cls = normalizeClass(value);
-      if (cls)
-        el.setAttribute("class", cls);
-      else
-        el.removeAttribute("class");
-    }
-    return;
-  }
-  if (isReactive(value)) {
-    effect(() => {
-      const resolved = resolveValue(value);
-      applyProp(el, key, resolved);
-    });
-  } else {
-    applyProp(el, key, value);
-  }
-}
-function setStyleProperty(el, prop, val) {
-  const formatted = formatStyleProp(prop, val);
-  if (prop.startsWith("--") || prop.includes("-")) {
-    if (formatted === "") {
-      el.style.removeProperty(prop);
-    } else {
-      el.style.setProperty(prop, formatted);
-    }
-  } else {
-    el.style[prop] = formatted;
-  }
-}
-function applyProp(el, key, value) {
-  if (value === null || value === undefined || value === false && !key.startsWith("aria-") && !key.startsWith("data-")) {
-    if (key === "className" || key === "class") {
-      el.removeAttribute("class");
-    } else if (key === "style" && typeof value === "string") {
-      el.removeAttribute("style");
-    } else if (key in el && !(el instanceof SVGElement)) {
-      try {
-        el[key] = typeof el[key] === "boolean" ? false : "";
-      } catch {
-        el.removeAttribute(key);
-      }
-    } else {
-      el.removeAttribute(key);
-    }
-    return;
-  }
-  if (key === "className" || key === "class") {
-    const cls = normalizeClass(value);
-    if (cls) {
-      el.setAttribute("class", cls);
-    } else {
-      el.removeAttribute("class");
-    }
-  } else if (key === "style") {
-    if (typeof value === "string") {
-      el.setAttribute("style", value);
-    } else if (typeof value === "object" && value !== null) {
-      for (const styleKey in value) {
-        const styleVal = value[styleKey];
-        if (isReactive(styleVal)) {
-          effect(() => {
-            setStyleProperty(el, styleKey, resolveValue(styleVal));
-          });
-        } else {
-          setStyleProperty(el, styleKey, styleVal);
-        }
-      }
-    }
-  } else if (key === "dangerouslySetInnerHTML" && value && typeof value.__html === "string") {
-    el.innerHTML = value.__html;
-  } else if (key in el && !(el instanceof SVGElement) && key !== "list" && key !== "form") {
-    try {
-      el[key] = value;
-    } catch {
-      el.setAttribute(key, String(value));
-    }
-  } else {
-    if (key.startsWith("aria-") || key.startsWith("data-")) {
-      el.setAttribute(key, String(value));
-    } else if (value === true) {
-      el.setAttribute(key, "");
-    } else {
-      el.setAttribute(key, String(value));
-    }
-  }
-}
-function insertChild(parent, child, before = null) {
-  if (child === null || child === undefined || child === false || child === true) {
-    return null;
-  }
-  if (child instanceof Node) {
-    parent.insertBefore(child, before);
-    return child;
-  }
-  if (Array.isArray(child)) {
-    const fragment = document.createDocumentFragment();
-    for (const item of child) {
-      insertChild(fragment, item);
-    }
-    parent.insertBefore(fragment, before);
-    return fragment;
-  }
-  if (isReactive(child)) {
-    const marker = document.createTextNode("");
-    parent.insertBefore(marker, before);
-    let childScope = null;
-    let currentNodes = [];
-    effect(() => {
-      const resolved = resolveValue(child);
-      if ((typeof resolved === "string" || typeof resolved === "number") && currentNodes.length === 1 && currentNodes[0].nodeType === Node.TEXT_NODE) {
-        currentNodes[0].data = String(resolved);
-        return;
-      }
-      if (childScope) {
-        childScope.dispose();
-      }
-      childScope = new Scope(getActiveScope());
-      runInScope(childScope, () => {
-        for (const node of currentNodes) {
-          if (node.parentNode) {
-            node.parentNode.removeChild(node);
-          }
-        }
-        currentNodes = [];
-        if (resolved === null || resolved === undefined || resolved === false) {
-          return;
-        }
-        const frag = document.createDocumentFragment();
-        if (typeof resolved === "string" || typeof resolved === "number" || typeof resolved === "boolean") {
-          frag.appendChild(document.createTextNode(String(resolved)));
-        } else {
-          insertChild(frag, resolved);
-        }
-        currentNodes = Array.from(frag.childNodes);
-        if (marker.parentNode) {
-          marker.parentNode.insertBefore(frag, marker);
-        }
-      });
-    });
-    onCleanup(() => {
-      if (childScope) {
-        childScope.dispose();
-      }
-      for (const node of currentNodes) {
-        if (node.parentNode) {
-          node.parentNode.removeChild(node);
-        }
-      }
-      if (marker.parentNode) {
-        marker.parentNode.removeChild(marker);
-      }
-    });
-    return marker;
-  }
-  const textNode = document.createTextNode(String(child));
-  parent.insertBefore(textNode, before);
-  return textNode;
-}
-
-// src/signals/scope.ts
-class Scope {
-  subscribers = new Set;
-  cleanups = [];
-  parent = null;
-  isDisposed = false;
-  context;
-  constructor(parent = currentScope) {
-    this.parent = parent;
-    if (parent && !parent.isDisposed) {
-      parent.cleanups.push(() => this.dispose());
-      if (parent.context) {
-        this.context = new Map(parent.context);
-      }
-    }
-  }
-  addSubscriber(sub) {
-    if (this.isDisposed)
-      return;
-    this.subscribers.add(sub);
-  }
-  addCleanup(fn) {
-    if (this.isDisposed) {
-      fn();
-      return;
-    }
-    this.cleanups.push(fn);
-  }
-  dispose() {
-    if (this.isDisposed)
-      return;
-    this.isDisposed = true;
-    for (const sub of this.subscribers) {
-      sub.dispose();
-    }
-    this.subscribers.clear();
-    for (let i = this.cleanups.length - 1;i >= 0; i--) {
-      try {
-        this.cleanups[i]();
-      } catch (err) {
-        console.error("Error during cleanup:", err);
-      }
-    }
-    this.cleanups = [];
-  }
-}
-function onCleanup(fn) {
-  if (currentSubscriber && "addCleanup" in currentSubscriber) {
-    currentSubscriber.addCleanup(fn);
-  } else if (currentScope) {
-    currentScope.addCleanup(fn);
-  }
-}
-function createRoot(fn) {
-  const prevScope = currentScope;
-  const scope = new Scope(null);
-  setCurrentScope(scope);
-  try {
-    return fn(() => scope.dispose());
-  } finally {
-    setCurrentScope(prevScope);
-  }
-}
-function runInScope(scope, fn) {
-  const prevScope = currentScope;
-  setCurrentScope(scope);
-  try {
-    return fn();
-  } finally {
-    setCurrentScope(prevScope);
-  }
-}
-function getActiveScope() {
-  return getCurrentScope();
-}
-
-// src/signals/context.ts
-function createContext(defaultValue) {
-  const id = Symbol("visage.context");
-  const context = {
-    id,
-    defaultValue,
-    Provider: (props) => {
-      const parentScope = getActiveScope();
-      const scope = new Scope(parentScope);
-      if (!scope.context) {
-        scope.context = new Map(parentScope?.context);
-      }
-      scope.context.set(id, props.value);
-      return runInScope(scope, () => {
-        const content = typeof props.children === "function" ? untrack(() => props.children()) : props.children;
-        if (typeof document !== "undefined") {
-          const frag = document.createDocumentFragment();
-          insertChild(frag, content);
-          return frag;
-        }
-        return content;
-      });
-    }
-  };
-  return context;
-}
-function useContext(context) {
-  let scope = getActiveScope();
-  while (scope) {
-    if (scope.context?.has(context.id)) {
-      return scope.context.get(context.id);
-    }
-    scope = scope.parent;
-  }
-  return context.defaultValue;
-}
-// src/signals/effect.ts
-class Effect {
-  _fn;
-  sources = new Set;
-  sourceVersions = new Map;
-  cleanups = [];
-  state = 2 /* DIRTY */;
-  scope;
-  constructor(fn) {
-    this._fn = fn;
-    this.scope = currentScope;
-    if (currentScope) {
-      currentScope.addSubscriber(this);
-    }
-    this.run();
-  }
-  addCleanup(fn) {
-    this.cleanups.push(fn);
-  }
-  runCleanups() {
-    for (let i = this.cleanups.length - 1;i >= 0; i--) {
-      try {
-        this.cleanups[i]();
-      } catch (e) {
-        console.error("Error in effect cleanup:", e);
-      }
-    }
-    this.cleanups = [];
-  }
-  markDirty(targetState = 2 /* DIRTY */) {
-    if (this.state >= targetState || this.state === 3 /* DISPOSED */) {
-      return;
-    }
-    this.state = targetState;
-    addPendingEffect(this);
-    if (batchDepth === 0) {
-      flushEffects();
-    }
-  }
-  run() {
-    if (this.state === 3 /* DISPOSED */)
-      return;
-    if (this.state === 1 /* CHECK_DIRTY */) {
-      let isDirty = false;
-      for (const source of this.sources) {
-        if (source instanceof Computed) {
-          source.updateIfNecessary();
-        }
-        const lastVersion = this.sourceVersions.get(source);
-        if (lastVersion !== undefined && lastVersion !== source.version) {
-          isDirty = true;
-        }
-      }
-      if (!isDirty) {
-        this.state = 0 /* CLEAN */;
-        return;
-      }
-    }
-    this.runCleanups();
-    this.cleanupSources();
-    const prevSubscriber = currentSubscriber;
-    setCurrentSubscriber(this);
-    const prevScope = currentScope;
-    setCurrentScope(this.scope);
-    try {
-      this.state = 0 /* CLEAN */;
-      const res = this._fn();
-      if (typeof res === "function") {
-        this.cleanups.push(res);
-      }
-    } finally {
-      setCurrentSubscriber(prevSubscriber);
-      setCurrentScope(prevScope);
-    }
-  }
-  cleanupSources() {
-    for (const source of this.sources) {
-      source.removeSubscriber(this);
-    }
-    this.sources.clear();
-    this.sourceVersions.clear();
-  }
-  dispose() {
-    if (this.state === 3 /* DISPOSED */)
-      return;
-    this.state = 3 /* DISPOSED */;
-    this.runCleanups();
-    this.cleanupSources();
-    removePendingEffect(this);
-  }
-}
-function effect(fn) {
-  const eff = new Effect(fn);
-  return () => eff.dispose();
-}
-var createEffect = effect;
-// src/signals/signal.ts
-class Signal {
-  [SIGNAL_BRAND] = true;
-  _value;
-  _subscribers = new Set;
-  _equals;
-  _onSet;
-  version = 0;
-  constructor(initialValue, equals, onSet) {
-    this._value = initialValue;
-    this._equals = equals ?? Object.is;
-    this._onSet = onSet;
-  }
-  get() {
-    if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
-      this._subscribers.add(currentSubscriber);
-      currentSubscriber.sources.add(this);
-      currentSubscriber.sourceVersions.set(this, this.version);
-    }
-    return this._value;
-  }
-  set(newValue) {
-    if (this._equals(this._value, newValue)) {
-      return;
-    }
-    if (currentSubscriber !== null && this._subscribers.has(currentSubscriber)) {
-      if (!warnedCyclicSubscribers.has(currentSubscriber)) {
-        warnedCyclicSubscribers.add(currentSubscriber);
-        if (typeof console !== "undefined" && typeof console.warn === "function") {
-          console.warn(`[Visage Reactivity] Cyclic update detected: An active subscriber modified a signal that it depends on. ` + `To read a signal inside an effect/computed without creating a circular dependency, wrap the read in untrack():
-` + `  untrack(() => signal())`);
-        }
-      }
-    }
-    this._value = newValue;
-    this.version++;
-    if (this._onSet) {
-      this._onSet(newValue);
-    }
-    batch(() => {
-      this.notify();
-    });
-  }
-  update(fn) {
-    this.set(fn(this._value));
-  }
-  get value() {
-    return this.get();
-  }
-  set value(val) {
-    this.set(val);
-  }
-  removeSubscriber(sub) {
-    this._subscribers.delete(sub);
-  }
-  notify() {
-    if (this._subscribers.size === 0)
-      return;
-    const subs = Array.from(this._subscribers);
-    for (const sub of subs) {
-      sub.markDirty(2 /* DIRTY */);
-    }
-  }
-}
-function resolveStorage(storageOption) {
-  if (storageOption && typeof storageOption === "object") {
-    return storageOption;
-  }
-  if (storageOption === "session") {
-    try {
-      if (typeof sessionStorage !== "undefined")
-        return sessionStorage;
-    } catch {}
-    try {
-      if (typeof window !== "undefined" && window.sessionStorage) {
-        return window.sessionStorage;
-      }
-    } catch {}
-    try {
-      if (typeof globalThis !== "undefined" && globalThis.sessionStorage) {
-        return globalThis.sessionStorage;
-      }
-    } catch {}
-    return null;
-  }
-  try {
-    if (typeof localStorage !== "undefined")
-      return localStorage;
-  } catch {}
-  try {
-    if (typeof window !== "undefined" && window.localStorage) {
-      return window.localStorage;
-    }
-  } catch {}
-  try {
-    if (typeof globalThis !== "undefined" && globalThis.localStorage) {
-      return globalThis.localStorage;
-    }
-  } catch {}
-  return null;
-}
-function signal(initialValue, optionsOrEquals) {
-  const equals = typeof optionsOrEquals === "function" ? optionsOrEquals : optionsOrEquals?.equals;
-  const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
-  const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
-  const persistOption = typeof optionsOrEquals === "object" ? optionsOrEquals?.persist : undefined;
-  const persistConfig = persistOption ? typeof persistOption === "string" ? { key: persistOption } : persistOption : undefined;
-  let effectiveInitial = initialValue;
-  const storage = persistConfig ? resolveStorage(persistConfig.storage) : null;
-  const serialize = persistConfig?.serialize ?? JSON.stringify;
-  const deserialize = persistConfig?.deserialize ?? JSON.parse;
-  if (persistConfig && storage) {
-    try {
-      const stored = storage.getItem(persistConfig.key);
-      if (stored !== null) {
-        effectiveInitial = deserialize(stored);
-      }
-    } catch {}
-  }
-  let isSyncing = false;
-  const onSet = persistConfig && storage ? (val) => {
-    if (isSyncing)
-      return;
-    try {
-      storage.setItem(persistConfig.key, serialize(val));
-    } catch {}
-  } : undefined;
-  const s = new Signal(effectiveInitial, equals, onSet);
-  if (persistConfig && storage && (persistConfig.syncTabs ?? true) && typeof window !== "undefined" && typeof window.addEventListener === "function") {
-    const onStorage = (e) => {
-      if (e.key === persistConfig.key) {
-        try {
-          const nextVal = e.newValue !== null ? deserialize(e.newValue) : initialValue;
-          isSyncing = true;
-          try {
-            s.set(nextVal);
-          } finally {
-            isSyncing = false;
-          }
-        } catch {}
-      }
-    };
-    window.addEventListener("storage", onStorage);
-    if (currentScope) {
-      currentScope.addCleanup(() => {
-        window.removeEventListener("storage", onStorage);
-      });
-    }
-  }
-  const accessor = (...args) => {
-    if (args.length === 0) {
-      return s.get();
-    }
-    s.set(args[0]);
-    return args[0];
-  };
-  Object.defineProperties(accessor, {
-    [SIGNAL_BRAND]: { value: true },
-    get: { value: () => s.get() },
-    set: { value: (v) => s.set(v) },
-    update: { value: (fn) => s.update(fn) },
-    value: {
-      get: () => s.get(),
-      set: (v) => s.set(v)
-    }
-  });
-  if (!isInternal && typeof window !== "undefined" && window.__VISAGE_DEVTOOLS__) {
-    const devtools = window.__VISAGE_DEVTOOLS__;
-    const sigId = devtools.registerSignal({
-      name: customName,
-      type: "signal",
-      getValue: () => s.get(),
-      version: () => s.version,
-      subscribersCount: () => s._subscribers?.size ?? 0,
-      dependents: () => Array.from(s._subscribers ?? []).map((sub) => sub._devId).filter(Boolean)
-    });
-    s._devId = sigId;
-    if (currentScope) {
-      currentScope.addCleanup(() => {
-        devtools.unregisterSignal(sigId);
-      });
-    }
-  }
-  return accessor;
-}
-function createSignal(initialValue, optionsOrEquals) {
-  const s = signal(initialValue, optionsOrEquals);
-  const setter = (value) => {
-    if (typeof value === "function") {
-      s.update(value);
-    } else {
-      s.set(value);
-    }
-  };
-  return [s, setter];
-}
-// src/signals/store.ts
-var STORE_RAW = Symbol("visage.store.raw");
-var STORE_SIGNALS = Symbol("visage.store.signals");
-var STORE_PROXY = Symbol("visage.store.proxy");
-function isObject(val) {
-  return typeof val === "object" && val !== null && (typeof Node === "undefined" || !(val instanceof Node)) && !isSignal(val);
-}
-function getOrCreatePropertySignal(target, prop) {
-  let signalsMap = target[STORE_SIGNALS];
-  if (!signalsMap) {
-    signalsMap = new Map;
-    Object.defineProperty(target, STORE_SIGNALS, {
-      value: signalsMap,
-      enumerable: false,
-      writable: true
-    });
-  }
-  let sig = signalsMap.get(prop);
-  if (!sig) {
-    sig = new Signal(target[prop]);
-    signalsMap.set(prop, sig);
-  }
-  return sig;
-}
-function createStoreProxy(target) {
-  if (!isObject(target))
-    return target;
-  if (target[STORE_PROXY])
-    return target[STORE_PROXY];
-  const proxy = new Proxy(target, {
-    get(target, prop, receiver) {
-      if (prop === STORE_RAW)
-        return target;
-      if (prop === STORE_PROXY)
-        return proxy;
-      if (typeof prop === "string" || typeof prop === "symbol") {
-        const sig = getOrCreatePropertySignal(target, prop);
-        sig.get();
-      }
-      const value = Reflect.get(target, prop, receiver);
-      if (isObject(value)) {
-        return createStoreProxy(value);
-      }
-      return value;
-    },
-    set(target, prop, value, receiver) {
-      const prevValue = Reflect.get(target, prop, receiver);
-      if (Object.is(prevValue, value)) {
-        return true;
-      }
-      const success = Reflect.set(target, prop, value, receiver);
-      if (success) {
-        const sig = getOrCreatePropertySignal(target, prop);
-        sig.set(value);
-        if (Array.isArray(target) && prop !== "length") {
-          const lenSig = getOrCreatePropertySignal(target, "length");
-          lenSig.set(target.length);
-        }
-      }
-      return success;
-    },
-    deleteProperty(target, prop) {
-      const hadProp = Reflect.has(target, prop);
-      const success = Reflect.deleteProperty(target, prop);
-      if (hadProp && success) {
-        const sig = getOrCreatePropertySignal(target, prop);
-        sig.set(undefined);
-      }
-      return success;
-    }
-  });
-  Object.defineProperty(target, STORE_PROXY, {
-    value: proxy,
-    enumerable: false,
-    writable: true
-  });
-  return proxy;
-}
-function createStore(initialState) {
-  if (!isObject(initialState)) {
-    throw new Error("createStore requires an object or array as initial state");
-  }
-  return createStoreProxy(initialState);
-}
-function mutateStore(store, mutator) {
-  batch(() => {
-    mutator(store);
-  });
-}
-function unwrapStore(store) {
-  if (isObject(store) && store[STORE_RAW]) {
-    return store[STORE_RAW];
-  }
-  return store;
-}
-// src/devtools/hub.ts
-class DevToolsHub {
-  isOpen = signal(false, { internal: true });
-  activeTab = signal("signals", { internal: true });
-  highlightDOM = signal(false, { internal: true });
-  searchQuery = signal("", { internal: true });
-  _signalsMap = new Map;
-  signalsList = signal([], { internal: true });
-  _queriesMap = new Map;
-  queriesList = signal([], { internal: true });
-  rpcLogs = signal([], { internal: true });
-  _queryClients = new Set;
-  _signalCounter = 0;
-  constructor() {
-    if (typeof window !== "undefined") {
-      window.__VISAGE_DEVTOOLS__ = this;
-    }
-  }
-  toggle() {
-    this.isOpen.update((v) => !v);
-  }
-  setTab(tab) {
-    this.activeTab.set(tab);
-  }
-  registerSignal(options) {
-    const id = options.id ?? `sig_${++this._signalCounter}`;
-    const name = options.name ?? id;
-    const type = options.type ?? "signal";
-    const record = {
-      id,
-      name,
-      type,
-      getValue: options.getValue,
-      version: options.version,
-      dependencies: options.dependencies,
-      dependents: options.dependents,
-      subscribersCount: options.subscribersCount,
-      lastUpdatedAt: Date.now()
-    };
-    this._signalsMap.set(id, record);
-    this.refreshSignals();
-    return id;
-  }
-  unregisterSignal(id) {
-    if (this._signalsMap.delete(id)) {
-      this.refreshSignals();
-    }
-  }
-  clearSignals() {
-    this._signalsMap.clear();
-    this._signalCounter = 0;
-    this.refreshSignals();
-  }
-  clearQueries() {
-    this._queriesMap.clear();
-    this.queriesList.set([]);
-  }
-  clearAll() {
-    this.clearSignals();
-    this.clearQueries();
-    this.clearLogs();
-  }
-  refreshSignals() {
-    this.signalsList.set(Array.from(this._signalsMap.values()));
-  }
-  attachQueryClient(client) {
-    if (this._queryClients.has(client))
-      return;
-    this._queryClients.add(client);
-    const syncQueries = () => {
-      const cache = client.getQueryCache();
-      const allQueries = cache.getAll();
-      const records = allQueries.map((q) => ({
-        hash: q.queryHash,
-        key: q.queryKey,
-        status: () => q.status(),
-        fetchStatus: () => q.fetchStatus(),
-        data: () => q.data(),
-        error: () => q.error(),
-        dataUpdatedAt: () => q.dataUpdatedAt(),
-        refetch: () => q.fetch(),
-        invalidate: () => q.invalidate()
-      }));
-      this._queriesMap.clear();
-      for (const r of records) {
-        this._queriesMap.set(r.hash, r);
-      }
-      this.queriesList.set(records);
-    };
-    client.getQueryCache().subscribe(() => {
-      syncQueries();
-    });
-    syncQueries();
-  }
-  logRpcCall(record) {
-    const fullRecord = {
-      ...record,
-      status: record.status ?? "pending",
-      startTime: Date.now(),
-      events: []
-    };
-    this.rpcLogs.update((prev) => [fullRecord, ...prev.slice(0, 99)]);
-    return fullRecord.id;
-  }
-  updateRpcCall(id, updates) {
-    this.rpcLogs.update((prev) => prev.map((item) => {
-      if (item.id === id) {
-        const duration = updates.duration ?? (updates.status ? Date.now() - item.startTime : item.duration);
-        return { ...item, ...updates, duration };
-      }
-      return item;
-    }));
-  }
-  logRpcEvent(id, data) {
-    this.rpcLogs.update((prev) => prev.map((item) => {
-      if (item.id === id) {
-        const events = item.events ? [...item.events, { timestamp: Date.now(), data }] : [{ timestamp: Date.now(), data }];
-        return { ...item, events, status: "streaming" };
-      }
-      return item;
-    }));
-  }
-  clearLogs() {
-    this.rpcLogs.set([]);
-  }
-}
-var devtoolsHub = new DevToolsHub;
-
-// src/style/hash.ts
-function hashString(str) {
-  let hash = 2166136261;
-  for (let i = 0;i < str.length; i++) {
-    hash ^= str.charCodeAt(i);
-    hash = Math.imul(hash, 16777619);
-  }
-  return (hash >>> 0).toString(36);
-}
-function getScopeId(css, prefix = "v") {
-  const hash = hashString(css.trim());
-  return `${prefix}-${hash}`;
-}
-
-// src/style/manager.ts
-class StyleManager {
-  _styles = new Map;
-  _ssrStyles = new Set;
-  inject(id, css) {
-    let entry = this._styles.get(id);
-    if (!entry) {
-      entry = { id, css, count: 0 };
-      this._styles.set(id, entry);
-      if (typeof document !== "undefined") {
-        const target = document.head || document.documentElement || document.body;
-        if (target) {
-          const styleEl = document.createElement("style");
-          styleEl.id = `visage-style-${id}`;
-          styleEl.setAttribute("data-visage-scope", id);
-          styleEl.textContent = css;
-          target.appendChild(styleEl);
-          entry.element = styleEl;
-        }
-      }
-      this._ssrStyles.add(css);
-    }
-    entry.count++;
-    return () => {
-      if (!entry)
-        return;
-      entry.count--;
-      if (entry.count <= 0) {
-        if (entry.element?.parentNode) {
-          entry.element.parentNode.removeChild(entry.element);
-        }
-        this._styles.delete(id);
-      }
-    };
-  }
-  has(id) {
-    return this._styles.has(id);
-  }
-  extractSSRStyles() {
-    return Array.from(this._ssrStyles).join(`
-`);
-  }
-  clear() {
-    for (const entry of this._styles.values()) {
-      if (entry.element?.parentNode) {
-        entry.element.parentNode.removeChild(entry.element);
-      }
-    }
-    this._styles.clear();
-    this._ssrStyles.clear();
-  }
-}
-var styleManager = new StyleManager;
-function extractStyleTags() {
-  const css = styleManager.extractSSRStyles();
-  return css ? `<style data-visage-ssr="true">${css}</style>` : "";
-}
-
-// src/style/parser.ts
-function scopeSelector(selector, options) {
-  const { scopeId, passToChildren = false } = options;
-  const scopeAttr = `[data-${scopeId}]`;
-  const parts = splitSelectorList(selector);
-  return parts.map((part) => {
-    const trimmed = part.trim();
-    if (!trimmed)
-      return "";
-    if (trimmed.includes(":global(") || trimmed.includes("::v-global(")) {
-      return trimmed.replace(/(.*?)(?:::v-global|:global)\(([^)]+)\)(.*)/g, (_match, before, globalTarget, after) => {
-        const prefix = before.trim();
-        const scopedPrefix = prefix ? scopeCompoundSelector(prefix, scopeAttr) : "";
-        if (scopedPrefix) {
-          return `${scopedPrefix} ${globalTarget.trim()}${after}`;
-        }
-        return `${globalTarget.trim()}${after}`;
-      }).trim();
-    }
-    if (trimmed.includes(":deep(") || trimmed.includes("::v-deep(")) {
-      return trimmed.replace(/(.*?)(?:::v-deep|:deep)\(([^)]+)\)(.*)/g, (_match, before, deepTarget, after) => {
-        const prefix = before.trim();
-        const scopedPrefix = prefix ? scopeCompoundSelector(prefix, scopeAttr) : scopeAttr;
-        return `${scopedPrefix} ${deepTarget.trim()}${after}`;
-      }).trim();
-    }
-    if (passToChildren) {
-      const compound = scopeCompoundSelector(trimmed, scopeAttr);
-      return `${scopeAttr} ${trimmed}, ${compound}`;
-    }
-    return scopeCompoundSelector(trimmed, scopeAttr);
-  }).filter(Boolean).join(", ");
-}
-function scopeCompoundSelector(selector, scopeAttr) {
-  const combinatorRegex = /([ >+~]+)/;
-  const tokens = selector.split(combinatorRegex);
-  const scopedTokens = tokens.map((token, index) => {
-    if (index % 2 === 1)
-      return token;
-    const piece = token.trim();
-    if (!piece || piece === "*")
-      return piece ? `${piece}${scopeAttr}` : "";
-    const pseudoElemIdx = piece.indexOf("::");
-    if (pseudoElemIdx !== -1) {
-      const base = piece.slice(0, pseudoElemIdx);
-      const pseudo = piece.slice(pseudoElemIdx);
-      return `${base}${scopeAttr}${pseudo}`;
-    }
-    const pseudoClassIdx = piece.indexOf(":");
-    if (pseudoClassIdx !== -1) {
-      const base = piece.slice(0, pseudoClassIdx);
-      const pseudo = piece.slice(pseudoClassIdx);
-      return `${base}${scopeAttr}${pseudo}`;
-    }
-    return `${piece}${scopeAttr}`;
-  });
-  return scopedTokens.join("");
-}
-function splitSelectorList(selectorList) {
-  const result = [];
-  let depth = 0;
-  let current = "";
-  for (let i = 0;i < selectorList.length; i++) {
-    const char = selectorList[i];
-    if (char === "(") {
-      depth++;
-      current += char;
-    } else if (char === ")") {
-      depth = Math.max(0, depth - 1);
-      current += char;
-    } else if (char === "," && depth === 0) {
-      if (current.trim())
-        result.push(current.trim());
-      current = "";
-    } else {
-      current += char;
-    }
-  }
-  if (current.trim())
-    result.push(current.trim());
-  return result;
-}
-function scopeCSS(css, options) {
-  const { scopeId } = options;
-  const keyframeNames = new Set;
-  const keyframeRegex = /@(?:-webkit-)?keyframes\s+([a-zA-Z0-9_-]+)/g;
-  let kMatch = keyframeRegex.exec(css);
-  while (kMatch !== null) {
-    if (kMatch[1]) {
-      keyframeNames.add(kMatch[1]);
-    }
-    kMatch = keyframeRegex.exec(css);
-  }
-  let processed = css;
-  for (const name of keyframeNames) {
-    const scopedName = `${scopeId}-${name}`;
-    const defRegex = new RegExp(`(@(?:-webkit-)?keyframes\\s+)${name}\\b`, "g");
-    processed = processed.replace(defRegex, `$1${scopedName}`);
-  }
-  if (keyframeNames.size > 0) {
-    for (const name of keyframeNames) {
-      const scopedName = `${scopeId}-${name}`;
-      const animRegex = new RegExp(`(animation(?:-name)?\\s*:[^;}]*?)\\b${name}\\b([^;}]*)`, "g");
-      processed = processed.replace(animRegex, `$1${scopedName}$2`);
-    }
-  }
-  return transformRules(processed, options);
-}
-function transformRules(css, options) {
-  let output = "";
-  let i = 0;
-  const len = css.length;
-  while (i < len) {
-    while (i < len && /\s/.test(css[i])) {
-      output += css[i];
-      i++;
-    }
-    if (i >= len)
-      break;
-    if (css[i] === "/" && css[i + 1] === "*") {
-      const endComment = css.indexOf("*/", i + 2);
-      if (endComment === -1) {
-        output += css.slice(i);
-        break;
-      }
-      output += css.slice(i, endComment + 2);
-      i = endComment + 2;
-      continue;
-    }
-    const openBrace = css.indexOf("{", i);
-    if (openBrace === -1) {
-      output += css.slice(i);
-      break;
-    }
-    const header = css.slice(i, openBrace).trim();
-    if (header.startsWith("@")) {
-      if (header.startsWith("@media") || header.startsWith("@supports") || header.startsWith("@container")) {
-        const closeBrace = findMatchingBrace(css, openBrace);
-        const innerContent = css.slice(openBrace + 1, closeBrace);
-        const transformedInner = transformRules(innerContent, options);
-        output += `${header} {
-${transformedInner}
-}`;
-        i = closeBrace + 1;
-        continue;
-      }
-      if (header.includes("keyframes") || header.startsWith("@font-face")) {
-        const closeBrace = findMatchingBrace(css, openBrace);
-        output += css.slice(i, closeBrace + 1);
-        i = closeBrace + 1;
-        continue;
-      }
-    }
-    const closeBrace = css.indexOf("}", openBrace);
-    if (closeBrace === -1) {
-      output += css.slice(i);
-      break;
-    }
-    const body = css.slice(openBrace + 1, closeBrace);
-    const scopedSelector = scopeSelector(header, options);
-    output += `${scopedSelector} {${body}}`;
-    i = closeBrace + 1;
-  }
-  return output;
-}
-function findMatchingBrace(str, openIndex) {
-  let depth = 0;
-  for (let i = openIndex;i < str.length; i++) {
-    if (str[i] === "{")
-      depth++;
-    else if (str[i] === "}") {
-      depth--;
-      if (depth === 0)
-        return i;
-    }
-  }
-  return str.length - 1;
-}
-
-// src/style/create-style.ts
-function formatCSSValue(prop, val) {
-  return formatStyleProp(prop, val);
-}
-function objectToCSS(classes) {
-  let css = "";
-  for (const [selector, rules] of Object.entries(classes)) {
-    if (typeof rules !== "object" || rules === null)
-      continue;
-    const sel = selector.startsWith(".") || selector.startsWith("@") || selector.startsWith(":") || selector.includes(" ") || selector === "*" ? selector : `.${selector}`;
-    let mainRules = "";
-    let nestedRules = "";
-    for (const [prop, val] of Object.entries(rules)) {
-      if (typeof val === "object" && val !== null) {
-        const nestedSel = prop.startsWith("&") ? prop.replace(/&/g, sel) : prop.startsWith(":") ? `${sel}${prop}` : `${sel} ${prop}`;
-        nestedRules += `${nestedSel} {
-`;
-        for (const [np, nv] of Object.entries(val)) {
-          if (nv !== undefined && nv !== null) {
-            const kebab = np.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-            nestedRules += `  ${kebab}: ${formatCSSValue(np, nv)};
-`;
-          }
-        }
-        nestedRules += `}
-`;
-      } else if (val !== undefined && val !== null) {
-        const kebab = prop.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-        mainRules += `  ${kebab}: ${formatCSSValue(prop, val)};
-`;
-      }
-    }
-    if (mainRules) {
-      css += `${sel} {
-${mainRules}}
-`;
-    }
-    if (nestedRules) {
-      css += nestedRules;
-    }
-  }
-  return css;
-}
-function createStyle(templateOrObject, ...valuesOrOptions) {
-  let cssInput = "";
-  let options;
-  if (typeof templateOrObject === "object" && !Array.isArray(templateOrObject)) {
-    cssInput = objectToCSS(templateOrObject);
-    options = valuesOrOptions[0];
-  } else if (typeof templateOrObject === "string") {
-    cssInput = templateOrObject;
-    options = valuesOrOptions[0];
-  } else {
-    const template = templateOrObject;
-    for (let i = 0;i < template.length; i++) {
-      cssInput += template[i];
-      if (i < valuesOrOptions.length) {
-        cssInput += String(valuesOrOptions[i]);
-      }
-    }
-  }
-  const scopeId = options?.id ?? getScopeId(cssInput);
-  const scopeAttr = `data-${scopeId}`;
-  const classMap = {};
-  const classRegex = /\.([a-zA-Z0-9_-]+)/g;
-  let match = classRegex.exec(cssInput);
-  while (match !== null) {
-    const className = match[1];
-    if (className && !classMap[className]) {
-      classMap[className] = `${className}_${scopeId}`;
-    }
-    match = classRegex.exec(cssInput);
-  }
-  let transformedCSS = cssInput;
-  for (const [orig, scoped] of Object.entries(classMap)) {
-    const replaceRegex = new RegExp(`\\.${orig}\\b`, "g");
-    transformedCSS = transformedCSS.replace(replaceRegex, `.${scoped}`);
-  }
-  const finalScopedCSS = scopeCSS(transformedCSS, {
-    scopeId,
-    passToChildren: options?.passToChildren ?? false
-  });
-  styleManager.inject(scopeId, finalScopedCSS);
-  const result = {
-    ...classMap,
-    scope: scopeId,
-    scopeAttr,
-    css: finalScopedCSS,
-    cx: (...args) => cx(...args)
-  };
-  return result;
-}
-function css(strings, ...values) {
-  let rawCSS = "";
-  for (let i = 0;i < strings.length; i++) {
-    rawCSS += strings[i];
-    if (i < values.length) {
-      rawCSS += String(values[i]);
-    }
-  }
-  const scopeId = getScopeId(rawCSS, "cls");
-  const className = `visage_${scopeId}`;
-  const fullCSS = rawCSS.includes("&") ? rawCSS.replace(/&/g, `.${className}`) : `.${className} { ${rawCSS} }`;
-  const scoped = scopeCSS(fullCSS, { scopeId });
-  styleManager.inject(scopeId, scoped);
-  return className;
-}
-function useStyle(cssInput, options) {
-  const getRaw = () => {
-    const val = typeof cssInput === "function" ? cssInput() : cssInput;
-    return typeof val === "object" ? objectToCSS(val) : val;
-  };
-  const raw = getRaw();
-  const scopeId = options?.id ?? getScopeId(raw);
-  const scopedCSS = scopeCSS(raw, {
-    scopeId,
-    passToChildren: options?.passToChildren ?? false
-  });
-  const cleanup = styleManager.inject(scopeId, scopedCSS);
-  onCleanup(() => {
-    cleanup();
-  });
-  return scopeId;
-}
-
-// src/style/component.tsx
-function Style(props) {
-  const getRawCSS = () => {
-    if (props.classes) {
-      const cls = typeof props.classes === "function" ? props.classes() : props.classes;
-      return objectToCSS(cls);
-    }
-    if (props.children) {
-      const ch = typeof props.children === "function" ? props.children() : props.children;
-      return typeof ch === "object" ? objectToCSS(ch) : ch;
-    }
-    return "";
-  };
-  const rawCSS = getRawCSS();
-  const scopeId = props.id ?? getScopeId(rawCSS);
-  const scopeAttr = `data-${scopeId}`;
-  if (typeof document !== "undefined") {
-    const marker = document.createTextNode("");
-    let unsubscribe = null;
-    effect(() => {
-      const currentCSS = getRawCSS();
-      const currentScopeId = props.id ?? getScopeId(currentCSS);
-      const scoped = scopeCSS(currentCSS, {
-        scopeId: currentScopeId,
-        passToChildren: props.passToChildren ?? true
-      });
-      if (unsubscribe) {
-        unsubscribe();
-      }
-      unsubscribe = styleManager.inject(currentScopeId, scoped);
-      const attachScope = () => {
-        const parent = marker.parentElement || marker.parentNode;
-        if (parent && typeof parent.setAttribute === "function") {
-          parent.setAttribute(`data-${currentScopeId}`, "");
-        }
-      };
-      attachScope();
-      queueMicrotask(attachScope);
-    });
-    onCleanup(() => {
-      if (unsubscribe) {
-        unsubscribe();
-      }
-      const parent = marker.parentElement || marker.parentNode;
-      if (parent && typeof parent.removeAttribute === "function") {
-        parent.removeAttribute(scopeAttr);
-      }
-    });
-    return marker;
-  }
-  const scoped = scopeCSS(rawCSS, {
-    scopeId,
-    passToChildren: props.passToChildren ?? true
-  });
-  styleManager.inject(scopeId, scoped);
-  return null;
-}
-
-// src/dom/resource.ts
-var SuspenseContext = createContext(null);
-function createResource(sourceOrFetcher, maybeFetcher) {
-  const isDirect = typeof maybeFetcher !== "function";
-  const fetcher = isDirect ? sourceOrFetcher : maybeFetcher;
-  const source = isDirect ? null : sourceOrFetcher;
-  const data = signal(undefined);
-  const loading = signal(true);
-  const error = signal(null);
-  let currentPromise = null;
-  let requestId = 0;
-  const load = async (arg) => {
-    const currentReq = ++requestId;
-    loading.set(true);
-    error.set(null);
-    const promise = isDirect ? fetcher() : fetcher(arg);
-    currentPromise = promise;
-    const suspense = useContext(SuspenseContext);
-    if (suspense) {
-      suspense.registerPromise(promise);
-    }
-    try {
-      const res = await promise;
-      if (currentReq === requestId) {
-        data.set(res);
-        loading.set(false);
-        currentPromise = null;
-      }
-      return res;
-    } catch (err) {
-      if (currentReq === requestId) {
-        error.set(err);
-        loading.set(false);
-        currentPromise = null;
-      }
-      throw err;
-    }
-  };
-  if (source) {
-    effect(() => {
-      const sourceVal = resolveValue(source);
-      if (sourceVal !== false && sourceVal !== null && sourceVal !== undefined) {
-        load(sourceVal).catch(() => {});
-      }
-    });
-  } else {
-    load().catch(() => {});
-  }
-  const accessor = () => {
-    if (loading() && currentPromise) {
-      const suspense = useContext(SuspenseContext);
-      if (suspense) {
-        suspense.registerPromise(currentPromise);
-      }
-    }
-    return data();
-  };
-  Object.defineProperties(accessor, {
-    loading: { get: () => loading },
-    error: { get: () => error },
-    mutate: { value: (val) => data.set(val) },
-    refetch: { value: () => source ? load(resolveValue(source)) : load() }
-  });
-  return accessor;
-}
-
-// src/dom/lazy.ts
-function lazy(importer) {
-  let loadedComponent = null;
-  let loadingPromise = null;
-  const preload = () => {
-    if (loadedComponent) {
-      return Promise.resolve(loadedComponent);
-    }
-    if (!loadingPromise) {
-      loadingPromise = importer().then((mod) => {
-        const comp = mod && typeof mod === "object" && "default" in mod ? mod.default : mod;
-        loadedComponent = comp;
-        return comp;
-      }).catch((err) => {
-        loadingPromise = null;
-        throw err;
-      });
-    }
-    return loadingPromise;
-  };
-  const LazyWrapper = (props) => {
-    if (loadedComponent) {
-      return loadedComponent(props);
-    }
-    const promise = preload();
-    const suspense = useContext(SuspenseContext);
-    if (suspense) {
-      suspense.registerPromise(promise);
-    }
-    const res = createResource(() => promise);
-    return () => {
-      const Comp = res();
-      return Comp ? Comp(props) : null;
-    };
-  };
-  LazyWrapper.preload = preload;
-  return LazyWrapper;
-}
-// src/dom/async.ts
-function Suspense(props) {
-  if (typeof document === "undefined") {
-    return typeof props.children === "function" ? props.children() : props.children;
-  }
-  const marker = document.createTextNode("");
-  const initialFrag = document.createDocumentFragment();
-  const pendingCount = signal(0);
-  let currentScope = null;
-  let currentNodes = [];
-  let isMounted = false;
-  const suspenseValue = {
-    registerPromise(p) {
-      pendingCount.update((c) => c + 1);
-      p.finally(() => {
-        pendingCount.update((c) => Math.max(0, c - 1));
-      });
-    }
-  };
-  const renderContent = (content) => {
-    const parent = marker.parentNode ?? (!isMounted ? initialFrag : null);
-    if (!parent)
-      return;
-    for (const n of currentNodes) {
-      if (n.parentNode)
-        n.parentNode.removeChild(n);
-    }
-    currentNodes = [];
-    const frag = document.createDocumentFragment();
-    insertChild(frag, content);
-    currentNodes = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
-    }
-  };
-  effect(() => {
-    if (currentScope) {
-      currentScope.dispose();
-      currentScope = null;
-    }
-    currentScope = new Scope(getActiveScope());
-    runInScope(currentScope, () => {
-      let threwPromise = null;
-      let rendered = null;
-      try {
-        const SuspenseProvider = SuspenseContext.Provider;
-        rendered = SuspenseProvider({
-          value: suspenseValue,
-          children: props.children
-        });
-      } catch (err) {
-        if (err && typeof err.then === "function") {
-          threwPromise = err;
-          suspenseValue.registerPromise(err);
-        } else {
-          throw err;
-        }
-      }
-      if (pendingCount() > 0 || threwPromise) {
-        renderContent(props.fallback);
-      } else {
-        renderContent(rendered);
-      }
-    });
-  });
-  isMounted = true;
-  initialFrag.appendChild(marker);
-  onCleanup(() => {
-    if (currentScope)
-      currentScope.dispose();
-  });
-  return initialFrag;
-}
-function ErrorBoundary(props) {
-  if (typeof document === "undefined") {
-    try {
-      return typeof props.children === "function" ? props.children() : props.children;
-    } catch (err) {
-      return typeof props.fallback === "function" ? props.fallback(err, () => {}) : props.fallback;
-    }
-  }
-  const marker = document.createTextNode("");
-  const initialFrag = document.createDocumentFragment();
-  const currentError = signal(null);
-  let currentScope = null;
-  let currentNodes = [];
-  let isMounted = false;
-  const reset = () => {
-    currentError.set(null);
-  };
-  const renderNodes = (child) => {
-    const parent = marker.parentNode ?? (!isMounted ? initialFrag : null);
-    if (!parent)
-      return;
-    for (const n of currentNodes) {
-      if (n.parentNode)
-        n.parentNode.removeChild(n);
-    }
-    currentNodes = [];
-    const frag = document.createDocumentFragment();
-    insertChild(frag, child);
-    currentNodes = Array.from(frag.childNodes);
-    if (marker.parentNode) {
-      marker.parentNode.insertBefore(frag, marker);
-    } else if (!isMounted) {
-      initialFrag.appendChild(frag);
-    }
-  };
-  effect(() => {
-    const err = currentError();
-    if (currentScope) {
-      currentScope.dispose();
-      currentScope = null;
-    }
-    currentScope = new Scope(getActiveScope());
-    runInScope(currentScope, () => {
-      if (err !== null) {
-        const fallbackNode = typeof props.fallback === "function" ? props.fallback(err, reset) : props.fallback;
-        renderNodes(fallbackNode);
-      } else {
-        try {
-          const content = typeof props.children === "function" ? props.children() : props.children;
-          renderNodes(content);
-        } catch (catchedErr) {
-          currentError.set(catchedErr);
-        }
-      }
-    });
-  });
-  isMounted = true;
-  initialFrag.appendChild(marker);
-  onCleanup(() => {
-    if (currentScope)
-      currentScope.dispose();
-  });
-  return initialFrag;
-}
-// src/dom/control-flow.ts
-function Show(props) {
-  if (typeof document === "undefined") {
-    const condition = resolveValue(props.when);
-    if (condition) {
-      return typeof props.children === "function" && props.children.length > 0 ? props.children(() => resolveValue(props.when)) : typeof props.children === "function" ? props.children() : props.children;
-    }
-    return props.fallback ?? null;
-  }
-  const marker = document.createComment("visage-show");
-  const initialFrag = document.createDocumentFragment();
-  initialFrag.appendChild(marker);
-  let currentScope = null;
-  let currentContent = [];
-  effect(() => {
-    const condition = resolveValue(props.when);
-    if (currentScope) {
-      currentScope.dispose();
-      currentScope = null;
-    }
-    for (const node of currentContent) {
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-    }
-    currentContent = [];
-    const frag = document.createDocumentFragment();
-    if (condition) {
-      currentScope = new Scope(getActiveScope());
-      untrack(() => {
-        runInScope(currentScope, () => {
-          const childRes = typeof props.children === "function" && props.children.length > 0 ? props.children(() => resolveValue(props.when)) : typeof props.children === "function" ? props.children() : props.children;
-          insertChild(frag, childRes);
-        });
-      });
-    } else if (props.fallback !== undefined) {
-      currentScope = new Scope(getActiveScope());
-      untrack(() => {
-        runInScope(currentScope, () => {
-          const fallbackRes = typeof props.fallback === "function" ? props.fallback() : props.fallback;
-          insertChild(frag, fallbackRes);
-        });
-      });
-    }
-    currentContent = Array.from(frag.childNodes);
-    const parent = marker.parentNode;
-    if (parent) {
-      parent.insertBefore(frag, marker);
-    }
-  });
-  onCleanup(() => {
-    if (currentScope) {
-      currentScope.dispose();
-    }
-    for (const node of currentContent) {
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-    }
-    if (marker.parentNode) {
-      marker.parentNode.removeChild(marker);
-    }
-  });
-  return initialFrag;
-}
-function For(props) {
-  if (typeof document === "undefined") {
-    const list = resolveValue(props.each) ?? [];
-    if (list.length === 0) {
-      return props.fallback ?? null;
-    }
-    return list.map((item, idx) => props.children(item, () => idx));
-  }
-  const marker = document.createTextNode("");
-  const initialFrag = document.createDocumentFragment();
-  let items = [];
-  let fallbackScope = null;
-  let fallbackNodes = [];
-  let isMounted = false;
-  effect(() => {
-    const list = resolveValue(props.each) ?? [];
-    const parent = marker.parentNode ?? (!isMounted ? initialFrag : null);
-    if (list.length === 0) {
-      for (const rec of items) {
-        rec.scope.dispose();
-        for (const node of rec.nodes) {
-          if (node.parentNode)
-            node.parentNode.removeChild(node);
-        }
-      }
-      items = [];
-      if (props.fallback !== undefined && fallbackNodes.length === 0 && parent) {
-        fallbackScope = new Scope(getActiveScope());
-        untrack(() => {
-          runInScope(fallbackScope, () => {
-            const frag = document.createDocumentFragment();
-            insertChild(frag, props.fallback);
-            fallbackNodes = Array.from(frag.childNodes);
-            if (marker.parentNode) {
-              marker.parentNode.insertBefore(frag, marker);
-            } else if (!isMounted) {
-              initialFrag.appendChild(frag);
-            }
-          });
-        });
-      }
-      return;
-    }
-    if (fallbackNodes.length > 0) {
-      if (fallbackScope) {
-        fallbackScope.dispose();
-        fallbackScope = null;
-      }
-      for (const node of fallbackNodes) {
-        if (node.parentNode)
-          node.parentNode.removeChild(node);
-      }
-      fallbackNodes = [];
-    }
-    if (!parent)
-      return;
-    const newItems = [];
-    const prevMap = new Map;
-    for (const rec of items) {
-      prevMap.set(rec.item, rec);
-    }
-    for (let i = 0;i < list.length; i++) {
-      const item = list[i];
-      const existing = prevMap.get(item);
-      if (existing) {
-        existing.indexSignal(i);
-        newItems.push(existing);
-        prevMap.delete(item);
-      } else {
-        let indexVal = i;
-        const indexSubscribers = new Set;
-        const indexSignal = (...args) => {
-          if (args.length > 0 && args[0] !== undefined && args[0] !== indexVal) {
-            indexVal = args[0];
-            for (const sub of Array.from(indexSubscribers))
-              sub();
-          }
-          return indexVal;
-        };
-        const itemScope = new Scope(getActiveScope());
-        let itemNodes = [];
-        untrack(() => {
-          runInScope(itemScope, () => {
-            const frag = document.createDocumentFragment();
-            const child = props.children(item, indexSignal);
-            insertChild(frag, child);
-            itemNodes = Array.from(frag.childNodes);
-          });
-        });
-        newItems.push({
-          item,
-          scope: itemScope,
-          nodes: itemNodes,
-          indexSignal
-        });
-      }
-    }
-    for (const [, removed] of prevMap) {
-      removed.scope.dispose();
-      for (const node of removed.nodes) {
-        if (node.parentNode)
-          node.parentNode.removeChild(node);
-      }
-    }
-    if (marker.parentNode) {
-      let currentMarker = marker;
-      for (let i = newItems.length - 1;i >= 0; i--) {
-        const rec = newItems[i];
-        for (let j = rec.nodes.length - 1;j >= 0; j--) {
-          const node = rec.nodes[j];
-          if (node.nextSibling !== currentMarker) {
-            marker.parentNode.insertBefore(node, currentMarker);
-          }
-          currentMarker = node;
-        }
-      }
-    } else if (!isMounted) {
-      for (const rec of newItems) {
-        for (const node of rec.nodes) {
-          initialFrag.appendChild(node);
-        }
-      }
-    }
-    items = newItems;
-  });
-  isMounted = true;
-  initialFrag.appendChild(marker);
-  onCleanup(() => {
-    for (const rec of items) {
-      rec.scope.dispose();
-    }
-    if (fallbackScope) {
-      fallbackScope.dispose();
-    }
-  });
-  return initialFrag;
-}
-function Portal(props) {
-  if (typeof document === "undefined") {
-    return null;
-  }
-  const marker = document.createTextNode("");
-  let currentScope = null;
-  let nodes = [];
-  effect(() => {
-    const target = props.mount ?? (typeof document !== "undefined" ? document.body : null);
-    if (!target)
-      return;
-    if (currentScope) {
-      currentScope.dispose();
-      currentScope = null;
-    }
-    for (const node of nodes) {
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-    }
-    nodes = [];
-    currentScope = new Scope(getActiveScope());
-    untrack(() => {
-      runInScope(currentScope, () => {
-        const childRes = typeof props.children === "function" ? props.children() : props.children;
-        const frag = document.createDocumentFragment();
-        insertChild(frag, childRes);
-        nodes = Array.from(frag.childNodes);
-        target.appendChild(frag);
-      });
-    });
-  });
-  onCleanup(() => {
-    if (currentScope) {
-      currentScope.dispose();
-      currentScope = null;
-    }
-    for (const node of nodes) {
-      if (node.parentNode) {
-        node.parentNode.removeChild(node);
-      }
-    }
-    nodes = [];
-  });
-  return marker;
-}
-// src/jsx-runtime/index.ts
-var SVG_NS = "http://www.w3.org/2000/svg";
-var SVG_TAGS = new Set([
-  "svg",
-  "path",
-  "circle",
-  "rect",
-  "g",
-  "line",
-  "polyline",
-  "polygon",
-  "text",
-  "defs",
-  "clipPath",
-  "linearGradient",
-  "radialGradient",
-  "stop"
-]);
-function Fragment(props) {
-  if (typeof document === "undefined") {
-    return props.children !== undefined ? props.children : [];
-  }
-  const fragment = document.createDocumentFragment();
-  if (props.children !== undefined) {
-    insertChild(fragment, props.children);
-  }
-  return fragment;
-}
-function jsx(type, props = {}, key) {
-  if (typeof type === "function") {
-    return type(props, key);
-  }
-  if (typeof type === "string") {
-    const { children, ...restProps } = props;
-    if (typeof document === "undefined") {
-      const attributes = new Map;
-      for (const propName in restProps) {
-        const val = restProps[propName];
-        if (propName === "className" || propName === "class") {
-          const resolved = typeof val === "function" ? val() : val;
-          if (resolved)
-            attributes.set("class", resolved);
-        } else if (propName === "style") {
-          const val = restProps[propName];
-          const resolved = resolveValue(val);
-          if (typeof resolved === "string") {
-            attributes.set("style", resolved);
-          } else if (typeof resolved === "object" && resolved !== null) {
-            const styleStr = Object.entries(resolved).map(([k, v]) => {
-              const finalVal = resolveValue(v);
-              const formatted = formatStyleProp(k, finalVal);
-              if (!formatted)
-                return "";
-              const kebab = k.startsWith("--") ? k : k.replace(/([A-Z])/g, "-$1").toLowerCase();
-              return `${kebab}: ${formatted}`;
-            }).filter(Boolean).join("; ");
-            if (styleStr)
-              attributes.set("style", styleStr);
-          }
-        } else if (!propName.startsWith("on")) {
-          const resolved = typeof val === "function" ? val() : val;
-          if (resolved === true) {
-            attributes.set(propName, propName);
-          } else if (resolved !== false && resolved !== null && resolved !== undefined) {
-            attributes.set(propName, resolved);
-          }
-        }
-      }
-      const childNodes = children !== undefined ? Array.isArray(children) ? children : [children] : [];
-      return {
-        tagName: type,
-        attributes,
-        childNodes
-      };
-    }
-    const isSvg = SVG_TAGS.has(type);
-    const element = isSvg ? document.createElementNS(SVG_NS, type) : document.createElement(type);
-    for (const propName in restProps) {
-      setAttribute(element, propName, restProps[propName]);
-    }
-    if (children !== undefined) {
-      insertChild(element, children);
-    }
-    return element;
-  }
-  return type;
-}
-var jsxs = jsx;
-var jsxDEV = jsx;
-
-// src/ui/utils.ts
-var idCounter = 0;
-function createId(prefix = "visage") {
-  return `${prefix}-${++idCounter}`;
-}
-function createControllableSignal(options) {
-  const isControlled = typeof options.value === "function";
-  const internal = signal(options.defaultValue, { internal: true });
-  const getter = computed(() => {
-    if (isControlled) {
-      const externalVal = options.value();
-      if (externalVal !== undefined)
-        return externalVal;
-    }
-    return internal();
-  }, { internal: true });
-  const setter = (next) => {
-    const currentVal = getter();
-    const nextVal = typeof next === "function" ? next(currentVal) : next;
-    if (!isControlled) {
-      internal.set(nextVal);
-    }
-    if (options.onChange && nextVal !== currentVal) {
-      options.onChange(nextVal);
-    }
-  };
-  return [getter, setter];
-}
-function trapFocus(container, event) {
-  if (event.key !== "Tab")
-    return;
-  const focusables = container.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
-  if (focusables.length === 0) {
-    event.preventDefault();
-    return;
-  }
-  const first = focusables[0];
-  const last = focusables[focusables.length - 1];
-  if (event.shiftKey) {
-    if (document.activeElement === first) {
-      last.focus();
-      event.preventDefault();
-    }
-  } else {
-    if (document.activeElement === last) {
-      first.focus();
-      event.preventDefault();
-    }
-  }
-}
-function onClickOutside(elements, handler) {
-  const listener = (event) => {
-    const target = event.target;
-    if (!target)
-      return;
-    const list = Array.isArray(elements) ? elements : [elements];
-    const isInside = list.some((el) => el?.contains(target));
-    if (!isInside) {
-      handler(event);
-    }
-  };
-  if (typeof document !== "undefined") {
-    document.addEventListener("mousedown", listener, true);
-    document.addEventListener("touchstart", listener, true);
-  }
-  return () => {
-    if (typeof document !== "undefined") {
-      document.removeEventListener("mousedown", listener, true);
-      document.removeEventListener("touchstart", listener, true);
-    }
-  };
-}
-
-// src/ui/tabs.tsx
-var TabsContext = createContext(null);
-function useTabsContext() {
-  return useContext(TabsContext);
-}
-function TabsRoot(props) {
-  const [value, setValue] = createControllableSignal({
-    value: props.value,
-    defaultValue: props.defaultValue ?? (props.items && props.items.length > 0 ? props.items[0]?.value : ""),
-    onChange: props.onValueChange
-  });
-  const baseId = createId("tabs");
-  const orientation = props.orientation ?? "horizontal";
-  const activationMode = props.activationMode ?? "automatic";
-  const ctx = {
-    value,
-    setValue,
-    orientation,
-    activationMode,
-    baseId
-  };
-  const {
-    as: Tag = "div",
-    value: _v,
-    defaultValue: _dv,
-    onValueChange: _ovc,
-    orientation: _ori,
-    activationMode: _am,
-    items,
-    listClass,
-    triggerClass,
-    contentClass,
-    children,
-    class: className,
-    style,
-    ...rest
-  } = props;
-  return TabsContext.Provider({
-    value: ctx,
-    children: () => /* @__PURE__ */ jsxs(Tag, {
-      "data-orientation": orientation,
-      class: className,
-      style,
-      ...rest,
-      children: [
-        items ? /* @__PURE__ */ jsxs(Fragment, {
-          children: [
-            /* @__PURE__ */ jsx(TabsList, {
-              class: listClass,
-              children: items.map((item) => /* @__PURE__ */ jsxs(TabsTrigger, {
-                value: item.value,
-                disabled: item.disabled,
-                class: triggerClass,
-                children: [
-                  item.icon ? /* @__PURE__ */ jsx("span", {
-                    class: "tab-icon",
-                    style: { display: "inline-flex", alignItems: "center" },
-                    children: typeof item.icon === "function" ? item.icon() : item.icon
-                  }) : null,
-                  typeof item.label === "function" ? item.label() : item.label
-                ]
-              }))
-            }),
-            items.map((item) => /* @__PURE__ */ jsx(TabsContent, {
-              value: item.value,
-              class: contentClass,
-              children: typeof item.content === "function" ? item.content() : item.content
-            }))
-          ]
-        }) : null,
-        typeof children === "function" ? children() : children
-      ]
-    })
-  });
-}
-function TabsList(props) {
-  const ctx = useContext(TabsContext);
-  const handleKeyDown = (e) => {
-    if (props.onKeyDown)
-      props.onKeyDown(e);
-    if (e.defaultPrevented)
-      return;
-    const target = e.target;
-    if (target?.getAttribute("role") !== "tab")
-      return;
-    const list = target.closest('[role="tablist"]');
-    if (!list)
-      return;
-    const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
-    const index = tabs.indexOf(target);
-    if (index === -1)
-      return;
-    let nextIndex = index;
-    const isHorizontal = (ctx?.orientation ?? "horizontal") === "horizontal";
-    const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp";
-    const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown";
-    if (e.key === prevKey) {
-      nextIndex = index === 0 ? tabs.length - 1 : index - 1;
-      e.preventDefault();
-    } else if (e.key === nextKey) {
-      nextIndex = index === tabs.length - 1 ? 0 : index + 1;
-      e.preventDefault();
-    } else if (e.key === "Home") {
-      nextIndex = 0;
-      e.preventDefault();
-    } else if (e.key === "End") {
-      nextIndex = tabs.length - 1;
-      e.preventDefault();
-    }
-    if (nextIndex !== index) {
-      const nextTab = tabs[nextIndex];
-      nextTab.focus();
-      if (ctx?.activationMode === "automatic") {
-        const val = nextTab.getAttribute("data-value");
-        if (val)
-          ctx.setValue(val);
-      }
-    }
-  };
-  const { as: Tag = "div", children, onKeyDown, class: className, style, ...rest } = props;
-  return /* @__PURE__ */ jsx(Tag, {
-    role: "tablist",
-    "aria-orientation": ctx?.orientation ?? "horizontal",
-    class: className,
-    style,
-    onKeyDown: handleKeyDown,
-    ...rest,
-    children
-  });
-}
-function TabsTrigger(props) {
-  const ctx = useContext(TabsContext);
-  const isSelected = () => ctx ? ctx.value() === props.value : false;
-  const handleClick = (e) => {
-    if (props.onClick)
-      props.onClick(e);
-    if (!e.defaultPrevented && ctx) {
-      ctx.setValue(props.value);
-    }
-  };
-  const {
-    value,
-    disabled,
-    as: Tag = "button",
-    children,
-    onClick,
-    class: className,
-    style,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx(Tag, {
-    id: ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
-    type: Tag === "button" ? "button" : undefined,
-    role: "tab",
-    "aria-selected": isSelected,
-    "aria-controls": ctx ? `${ctx.baseId}-panel-${value}` : undefined,
-    "data-state": () => isSelected() ? "active" : "inactive",
-    "data-value": value,
-    tabIndex: () => isSelected() ? 0 : -1,
-    disabled,
-    class: className,
-    style,
-    onClick: handleClick,
-    ...rest,
-    children
-  });
-}
-function TabsContent(props) {
-  const ctx = useContext(TabsContext);
-  const isSelected = () => ctx ? ctx.value() === props.value : false;
-  const { value, forceMount, as: Tag = "div", children, class: className, style, ...rest } = props;
-  if (forceMount) {
-    return /* @__PURE__ */ jsx(Tag, {
-      id: ctx ? `${ctx.baseId}-panel-${value}` : undefined,
-      role: "tabpanel",
-      "aria-labelledby": ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
-      "data-state": () => isSelected() ? "active" : "inactive",
-      hidden: () => !isSelected(),
-      tabIndex: 0,
-      class: className,
-      style,
-      ...rest,
-      children
-    });
-  }
-  return /* @__PURE__ */ jsx(Show, {
-    when: isSelected,
-    children: /* @__PURE__ */ jsx(Tag, {
-      id: ctx ? `${ctx.baseId}-panel-${value}` : undefined,
-      role: "tabpanel",
-      "aria-labelledby": ctx ? `${ctx.baseId}-trigger-${value}` : undefined,
-      "data-state": "active",
-      tabIndex: 0,
-      class: className,
-      style,
-      ...rest,
-      children
-    })
-  });
-}
-var Tabs = Object.assign(TabsRoot, {
-  Root: TabsRoot,
-  List: TabsList,
-  Trigger: TabsTrigger,
-  Content: TabsContent
-});
-
-// src/ui/tooltip.tsx
-var TooltipContext = createContext(null);
-function useTooltipContext() {
-  return useContext(TooltipContext);
-}
-function TooltipRoot(props) {
-  const [open, setOpen] = createControllableSignal({
-    value: props.open,
-    defaultValue: props.defaultOpen ?? false,
-    onChange: props.onOpenChange
-  });
-  const tooltipId = createId("tooltip");
-  const triggerRef = { current: null };
-  const ctx = {
-    open,
-    setOpen,
-    openDelay: props.openDelay ?? 150,
-    closeDelay: props.closeDelay ?? 100,
-    tooltipId,
-    triggerRef
-  };
-  if (props.content !== undefined) {
-    return TooltipContext.Provider({
-      value: ctx,
-      children: () => /* @__PURE__ */ jsxs("span", {
-        class: "visage-tooltip-root",
-        style: { position: "relative", display: "inline-flex", alignItems: "center" },
-        children: [
-          /* @__PURE__ */ jsx(TooltipTrigger, {
-            as: props.triggerAs ?? "button",
-            class: props.triggerClass,
-            style: {
-              background: "transparent",
-              border: "none",
-              padding: 0,
-              display: "inline-flex",
-              alignItems: "center",
-              cursor: "help"
-            },
-            children: typeof props.children === "function" ? props.children() : props.children
-          }),
-          /* @__PURE__ */ jsx(TooltipContent, {
-            side: props.side,
-            class: props.contentClass,
-            style: props.contentStyle,
-            portalled: props.portalled ?? false,
-            children: typeof props.content === "function" ? props.content() : props.content
-          })
-        ]
-      })
-    });
-  }
-  return TooltipContext.Provider({
-    value: ctx,
-    children: props.children
-  });
-}
-function TooltipTrigger(props) {
-  const ctx = useContext(TooltipContext);
-  let openTimer = null;
-  let closeTimer = null;
-  const clearTimers = () => {
-    if (openTimer)
-      clearTimeout(openTimer);
-    if (closeTimer)
-      clearTimeout(closeTimer);
-    openTimer = null;
-    closeTimer = null;
-  };
-  const handleMouseEnter = (e) => {
-    if (props.onMouseEnter)
-      props.onMouseEnter(e);
-    clearTimers();
-    if (!ctx)
-      return;
-    if (ctx.openDelay > 0) {
-      openTimer = setTimeout(() => ctx.setOpen(true), ctx.openDelay);
-    } else {
-      ctx.setOpen(true);
-    }
-  };
-  const handleMouseLeave = (e) => {
-    if (props.onMouseLeave)
-      props.onMouseLeave(e);
-    clearTimers();
-    if (!ctx)
-      return;
-    if (ctx.closeDelay > 0) {
-      closeTimer = setTimeout(() => ctx.setOpen(false), ctx.closeDelay);
-    } else {
-      ctx.setOpen(false);
-    }
-  };
-  const handleFocus = (e) => {
-    if (props.onFocus)
-      props.onFocus(e);
-    clearTimers();
-    ctx?.setOpen(true);
-  };
-  const handleBlur = (e) => {
-    if (props.onBlur)
-      props.onBlur(e);
-    clearTimers();
-    ctx?.setOpen(false);
-  };
-  onCleanup(clearTimers);
-  const {
-    as: Tag = "button",
-    children,
-    onMouseEnter,
-    onMouseLeave,
-    onFocus,
-    onBlur,
-    class: className,
-    style,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx(Tag, {
-    ref: (el) => {
-      if (ctx)
-        ctx.triggerRef.current = el;
-    },
-    type: Tag === "button" ? "button" : undefined,
-    tabIndex: Tag === "button" ? undefined : 0,
-    "aria-describedby": ctx?.tooltipId,
-    "data-state": () => ctx?.open() ? "open" : "closed",
-    class: className,
-    style: { display: "inline-flex", alignItems: "center", ...style },
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    ...rest,
-    children
-  });
-}
-function TooltipPortal(props) {
-  return /* @__PURE__ */ jsx(Portal, {
-    mount: props.mount,
-    children: props.children
-  });
-}
-function TooltipContent(props) {
-  const ctx = useContext(TooltipContext);
-  const isOpen = () => ctx ? ctx.open() : false;
-  const {
-    forceMount,
-    as: Tag = "div",
-    children,
-    class: className,
-    style,
-    portalled = true,
-    mount,
-    ...rest
-  } = props;
-  const content = forceMount ? /* @__PURE__ */ jsx(Tag, {
-    id: ctx?.tooltipId,
-    role: "tooltip",
-    "data-state": () => isOpen() ? "open" : "closed",
-    hidden: () => !isOpen(),
-    class: className,
-    style,
-    ...rest,
-    children
-  }) : /* @__PURE__ */ jsx(Show, {
-    when: isOpen,
-    children: /* @__PURE__ */ jsx(Tag, {
-      id: ctx?.tooltipId,
-      role: "tooltip",
-      "data-state": "open",
-      class: className,
-      style,
-      ...rest,
-      children
-    })
-  });
-  return portalled ? /* @__PURE__ */ jsx(Portal, {
-    mount,
-    children: content
-  }) : content;
-}
-var Tooltip = Object.assign(TooltipRoot, {
-  Root: TooltipRoot,
-  Trigger: TooltipTrigger,
-  Portal: TooltipPortal,
-  Content: TooltipContent
-});
-
-// src/ui/switch.tsx
-function SwitchRoot(props) {
-  const [checked, setChecked] = createControllableSignal({
-    value: props.checked,
-    defaultValue: props.defaultChecked ?? false,
-    onChange: props.onCheckedChange
-  });
-  const toggle = () => {
-    const isDisabled = typeof props.disabled === "function" ? props.disabled() : Boolean(props.disabled);
-    if (isDisabled)
-      return;
-    setChecked(!checked());
-  };
-  const handleClick = (e) => {
-    if (props.onClick)
-      props.onClick(e);
-    if (!e.defaultPrevented) {
-      toggle();
-    }
-  };
-  const handleKeyDown = (e) => {
-    if (props.onKeyDown)
-      props.onKeyDown(e);
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      toggle();
-    }
-  };
-  const {
-    checked: _c,
-    defaultChecked: _dc,
-    onCheckedChange: _occ,
-    disabled,
-    required,
-    name,
-    value,
-    thumbClass,
-    thumbStyle,
-    as: Tag = "button",
-    children,
-    onClick,
-    onKeyDown,
-    class: className,
-    style,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx(Tag, {
-    type: Tag === "button" ? "button" : undefined,
-    role: "switch",
-    "aria-checked": checked,
-    "data-state": () => checked() ? "checked" : "unchecked",
-    disabled,
-    class: className,
-    style,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    ...rest,
-    children: children !== undefined ? typeof children === "function" ? children() : children : /* @__PURE__ */ jsx(SwitchThumb, {
-      class: thumbClass,
-      style: thumbStyle
-    })
-  });
-}
-function SwitchThumb(props) {
-  const { as: Tag = "span", class: className, style, ...rest } = props;
-  return /* @__PURE__ */ jsx(Tag, {
-    class: className,
-    style,
-    ...rest
-  });
-}
-var Switch = Object.assign(SwitchRoot, {
-  Root: SwitchRoot,
-  Thumb: SwitchThumb
-});
-
-// src/devtools/DomTab.tsx
-function DomTab(props) {
-  return /* @__PURE__ */ jsx("div", {
-    style: { flex: 1, padding: "24px", overflowY: "auto", background: "#090d16" },
-    children: /* @__PURE__ */ jsxs("div", {
-      style: { maxWidth: "700px", margin: "0 auto" },
-      children: [
-        /* @__PURE__ */ jsxs("div", {
-          style: {
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            marginBottom: "20px"
-          },
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              children: [
-                /* @__PURE__ */ jsx("h3", {
-                  style: { margin: "0 0 6px 0", color: "#f8fafc", fontSize: "16px", fontWeight: 700 },
-                  children: "Real-Time DOM Mutation Highlighter"
-                }),
-                /* @__PURE__ */ jsx("p", {
-                  style: { margin: 0, color: "#94a3b8", fontSize: "13px", lineHeight: 1.5 },
-                  children: "Visage uses zero Virtual DOM and fine-grained reactivity. Only exact text nodes and attributes update in-place."
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              style: { display: "flex", alignItems: "center", gap: "10px" },
-              children: [
-                /* @__PURE__ */ jsx("span", {
-                  style: {
-                    fontSize: "11px",
-                    fontWeight: 700,
-                    letterSpacing: "0.04em",
-                    color: () => props.hub.highlightDOM() ? "#10b981" : "#64748b"
-                  },
-                  children: () => props.hub.highlightDOM() ? "ENABLED" : "DISABLED"
-                }),
-                /* @__PURE__ */ jsx(Switch, {
-                  checked: props.hub.highlightDOM,
-                  onCheckedChange: (val) => props.hub.highlightDOM.set(val)
-                })
-              ]
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          style: {
-            background: "#0c111d",
-            border: "1px solid #1e293b",
-            borderRadius: "8px",
-            padding: "16px",
-            marginBottom: "20px"
-          },
-          children: [
-            /* @__PURE__ */ jsx("h4", {
-              style: { margin: "0 0 10px 0", color: "#38bdf8", fontSize: "13px", fontWeight: 600 },
-              children: "Usage Instructions:"
-            }),
-            /* @__PURE__ */ jsxs("ul", {
-              style: {
-                margin: 0,
-                paddingLeft: "20px",
-                color: "#cbd5e1",
-                fontSize: "13px",
-                lineHeight: 1.6
-              },
-              children: [
-                /* @__PURE__ */ jsx("li", {
-                  children: "Toggle the switch above to enable visual flashing outlines across your app."
-                }),
-                /* @__PURE__ */ jsx("li", {
-                  children: "Interact with buttons, form inputs, tabs, and modals in your application."
-                }),
-                /* @__PURE__ */ jsxs("li", {
-                  children: [
-                    "Notice that ",
-                    /* @__PURE__ */ jsx("strong", {
-                      children: "only the exact updated node flashes"
-                    }),
-                    " without re-rendering the whole component or tree."
-                  ]
-                })
-              ]
-            })
-          ]
-        }),
-        /* @__PURE__ */ jsxs("div", {
-          style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" },
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              style: {
-                background: "#0c111d",
-                border: "1px solid #1e293b",
-                borderRadius: "8px",
-                padding: "14px"
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", {
-                  style: {
-                    fontWeight: 700,
-                    color: "#f87171",
-                    marginBottom: "6px",
-                    fontSize: "12px",
-                    textTransform: "uppercase",
-                    letterSpacing: "0.04em"
-                  },
-                  children: "Virtual DOM Model"
-                }),
-                /* @__PURE__ */ jsx("p", {
-                  style: { margin: 0, color: "#94a3b8", fontSize: "12px", lineHeight: 1.5 },
-                  children: "State changes re-run entire component functions, allocate temporary Virtual DOM nodes, and diff tree structures."
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              style: {
-                background: "#0c111d",
-                border: "1px solid #1e293b",
-                borderRadius: "8px",
-                padding: "14px"
-              },
-              children: [
-                /* @__PURE__ */ jsx("div", {
-                  style: {
-                    fontWeight: 700,
-                    color: "#34d399",
-                    marginBottom: "6px",
-                    fontSize: "12px",
-                    textTransform: "uppercase",
-                    letterSpacing: "0.04em"
-                  },
-                  children: "Visage Reactive Engine"
-                }),
-                /* @__PURE__ */ jsx("p", {
-                  style: { margin: 0, color: "#94a3b8", fontSize: "12px", lineHeight: 1.5 },
-                  children: "Component functions execute once during mounting. Signals push direct in-place mutations at native DOM speed."
-                })
-              ]
-            })
-          ]
-        })
-      ]
-    })
-  });
-}
-
-// src/devtools/GraphInspector.tsx
-function GraphInspector(props) {
-  return /* @__PURE__ */ jsx("div", {
-    style: {
-      width: "320px",
-      borderLeft: "1px solid #1e293b",
-      background: "#090d16",
-      padding: "16px",
-      overflowY: "auto"
-    },
-    children: /* @__PURE__ */ jsx(Show, {
-      when: props.selectedNode,
-      fallback: /* @__PURE__ */ jsxs("div", {
-        style: {
-          color: "#64748b",
-          textAlign: "center",
-          marginTop: "30px",
-          fontSize: "12px",
-          lineHeight: 1.6
-        },
-        children: [
-          /* @__PURE__ */ jsx("p", {
-            children: "Select any DAG node to inspect live dependencies, downstream subscribers, and reactive version history."
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            style: {
-              marginTop: "16px",
-              padding: "12px",
-              background: "#0f172a",
-              borderRadius: "6px",
-              textAlign: "left"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", {
-                style: { color: "#94a3b8", fontWeight: 600, marginBottom: "4px", fontSize: "11px" },
-                children: "Legend:"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                style: { color: "#38bdf8", fontSize: "11px" },
-                children: "[SIG] Upstream Source Signals"
-              }),
-              /* @__PURE__ */ jsx("div", {
-                style: { color: "#c084fc", fontSize: "11px" },
-                children: "[CMP] Derived Computeds"
-              })
-            ]
-          })
-        ]
-      }),
-      children: (node) => {
-        const deps = () => props.getDependencies(node());
-        const targets = () => props.getDependents(node());
-        return /* @__PURE__ */ jsxs("div", {
-          children: [
-            /* @__PURE__ */ jsxs("div", {
-              style: {
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "flex-start",
-                marginBottom: "12px"
-              },
-              children: [
-                /* @__PURE__ */ jsxs("div", {
-                  children: [
-                    /* @__PURE__ */ jsx("h4", {
-                      style: { margin: "0 0 2px 0", color: "#f1f5f9", fontSize: "15px" },
-                      children: () => node().name
-                    }),
-                    /* @__PURE__ */ jsxs("span", {
-                      style: { fontSize: "11px", color: "#64748b" },
-                      children: [
-                        "ID: ",
-                        () => node().id
-                      ]
-                    })
-                  ]
-                }),
-                /* @__PURE__ */ jsx("button", {
-                  type: "button",
-                  class: "visage-devtools-btn",
-                  onClick: () => props.selectedId.set(null),
-                  title: "Clear Selection",
-                  children: "Clear"
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              style: { display: "flex", gap: "6px", marginBottom: "16px" },
-              children: [
-                /* @__PURE__ */ jsx("span", {
-                  class: "visage-devtools-badge",
-                  style: {
-                    background: () => node().type === "computed" ? "#581c87" : "#0369a1",
-                    color: "#fff"
-                  },
-                  children: () => node().type.toUpperCase()
-                }),
-                /* @__PURE__ */ jsxs("span", {
-                  class: "visage-devtools-badge",
-                  children: [
-                    "VERSION: ",
-                    () => node().version()
-                  ]
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsx("div", {
-              style: { fontSize: "12px", color: "#94a3b8", marginBottom: "6px" },
-              children: "Live Value:"
-            }),
-            /* @__PURE__ */ jsx("pre", {
-              class: "visage-devtools-json",
-              style: { marginBottom: "16px" },
-              children: () => props.formatJSON(node().getValue())
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              style: { marginBottom: "16px" },
-              children: [
-                /* @__PURE__ */ jsxs("div", {
-                  style: {
-                    fontSize: "11px",
-                    fontWeight: 700,
-                    textTransform: "uppercase",
-                    color: "#38bdf8",
-                    marginBottom: "6px"
-                  },
-                  children: [
-                    "Upstream Inputs (",
-                    () => deps().length,
-                    ")"
-                  ]
-                }),
-                () => deps().length > 0 ? /* @__PURE__ */ jsx("div", {
-                  style: { display: "flex", flexDirection: "column", gap: "6px" },
-                  children: deps().map((d) => /* @__PURE__ */ jsxs("div", {
-                    class: "visage-graph-pill source",
-                    style: {
-                      width: "100%",
-                      justifyContent: "space-between",
-                      padding: "6px 8px"
-                    },
-                    onClick: () => props.selectedId.set(d.id),
-                    children: [
-                      /* @__PURE__ */ jsx("span", {
-                        children: d.name
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        style: { color: "#94a3b8" },
-                        children: [
-                          "v",
-                          d.version()
-                        ]
-                      })
-                    ]
-                  }))
-                }) : /* @__PURE__ */ jsx("div", {
-                  style: { fontSize: "11px", color: "#64748b" },
-                  children: "None (Root Reactive Source)"
-                })
-              ]
-            }),
-            /* @__PURE__ */ jsxs("div", {
-              children: [
-                /* @__PURE__ */ jsxs("div", {
-                  style: {
-                    fontSize: "11px",
-                    fontWeight: 700,
-                    textTransform: "uppercase",
-                    color: "#c084fc",
-                    marginBottom: "6px"
-                  },
-                  children: [
-                    "Downstream Consumers (",
-                    () => targets().length,
-                    ")"
-                  ]
-                }),
-                () => targets().length > 0 ? /* @__PURE__ */ jsx("div", {
-                  style: { display: "flex", flexDirection: "column", gap: "6px" },
-                  children: targets().map((t) => /* @__PURE__ */ jsxs("div", {
-                    class: "visage-graph-pill target",
-                    style: {
-                      width: "100%",
-                      justifyContent: "space-between",
-                      padding: "6px 8px"
-                    },
-                    onClick: () => props.selectedId.set(t.id),
-                    children: [
-                      /* @__PURE__ */ jsx("span", {
-                        children: t.name
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        style: { color: "#94a3b8" },
-                        children: [
-                          "v",
-                          t.version()
-                        ]
-                      })
-                    ]
-                  }))
-                }) : /* @__PURE__ */ jsx("div", {
-                  style: { fontSize: "11px", color: "#64748b" },
-                  children: "None (Leaf / UI Consumer)"
-                })
-              ]
-            })
-          ]
-        });
-      }
-    })
-  });
-}
-
-// src/devtools/GraphTab.tsx
-function GraphTab(props) {
-  const [filterType, setFilterType] = createSignal("all", {
-    internal: true
-  });
-  const [hoveredId, setHoveredId] = createSignal(null, { internal: true });
-  const allSignals = () => props.hub.signalsList();
-  const getDependencies = (node) => {
-    const depIds = node.dependencies ? node.dependencies() : [];
-    if (depIds.length === 0)
-      return [];
-    return allSignals().filter((s) => depIds.includes(s.id));
-  };
-  const getDependents = (node) => {
-    const directDependents = node.dependents ? node.dependents() : [];
-    return allSignals().filter((s) => directDependents.includes(s.id) || s.dependencies?.().includes(node.id));
-  };
-  const activeFocusId = () => hoveredId() ?? props.selectedId();
-  const focusedDeps = () => {
-    const id = activeFocusId();
-    if (!id)
-      return [];
-    const node = allSignals().find((s) => s.id === id);
-    if (!node)
-      return [];
-    return getDependencies(node).map((s) => s.id);
-  };
-  const focusedTargets = () => {
-    const id = activeFocusId();
-    if (!id)
-      return [];
-    const node = allSignals().find((s) => s.id === id);
-    if (!node)
-      return [];
-    return getDependents(node).map((s) => s.id);
-  };
-  const filteredSignals = () => allSignals().filter((s) => {
-    const q = props.searchQuery().toLowerCase().trim();
-    const matchQuery = !q || s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q);
-    const matchType = filterType() === "all" || s.type === filterType();
-    return matchQuery && matchType;
-  });
-  const stateSignals = () => filteredSignals().filter((s) => s.type === "signal");
-  const computedSignals = () => filteredSignals().filter((s) => s.type === "computed");
-  const selectedNode = () => {
-    const id = props.selectedId();
-    if (!id)
-      return null;
-    return allSignals().find((s) => s.id === id) ?? null;
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    class: "visage-graph-container",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        class: "visage-graph-toolbar",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            style: { display: "flex", alignItems: "center", gap: "10px" },
-            children: [
-              /* @__PURE__ */ jsx("input", {
-                class: "visage-devtools-input",
-                style: { width: "200px" },
-                placeholder: "Filter DAG graph...",
-                value: props.searchQuery,
-                onInput: (e) => props.searchQuery.set(e.target.value)
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                style: { display: "flex", gap: "4px" },
-                children: [
-                  /* @__PURE__ */ jsxs("button", {
-                    type: "button",
-                    class: () => `visage-devtools-btn ${filterType() === "all" ? "active" : ""}`,
-                    onClick: () => setFilterType("all"),
-                    children: [
-                      "All (",
-                      () => filteredSignals().length,
-                      ")"
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("button", {
-                    type: "button",
-                    class: () => `visage-devtools-btn ${filterType() === "signal" ? "active" : ""}`,
-                    onClick: () => setFilterType("signal"),
-                    children: [
-                      "Signals (",
-                      () => stateSignals().length,
-                      ")"
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("button", {
-                    type: "button",
-                    class: () => `visage-devtools-btn ${filterType() === "computed" ? "active" : ""}`,
-                    onClick: () => setFilterType("computed"),
-                    children: [
-                      "Computeds (",
-                      () => computedSignals().length,
-                      ")"
-                    ]
-                  })
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsxs("div", {
-            style: {
-              fontSize: "11px",
-              color: "#64748b",
-              display: "flex",
-              gap: "14px",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx("span", {
-                style: { color: "#38bdf8" },
-                children: "[SIG] Upstream"
-              }),
-              /* @__PURE__ */ jsx("span", {
-                style: { color: "#c084fc" },
-                children: "[CMP] Derived"
-              }),
-              /* @__PURE__ */ jsx("span", {
-                style: { color: "#10b981" },
-                children: "Glitch-Free DAG"
-              })
-            ]
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs("div", {
-        style: { flex: 1, display: "flex", overflow: "hidden" },
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            class: "visage-graph-canvas",
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                class: "visage-graph-column",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "visage-graph-col-header",
-                    children: [
-                      /* @__PURE__ */ jsx("span", {
-                        class: "visage-graph-pulse"
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        children: [
-                          "Reactive Sources (",
-                          () => stateSignals().length,
-                          ")"
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx(For, {
-                    each: stateSignals,
-                    children: (node) => {
-                      const isSelected = () => props.selectedId() === node.id;
-                      const isDep = () => focusedDeps().includes(node.id);
-                      const isTarget = () => focusedTargets().includes(node.id);
-                      const isDimmed = () => activeFocusId() !== null && !isSelected() && !isDep() && !isTarget();
-                      const dependents = () => getDependents(node);
-                      return /* @__PURE__ */ jsxs("div", {
-                        class: () => `visage-graph-node ${isSelected() ? "selected" : ""} ${isDep() ? "is-dependency" : ""} ${isTarget() ? "is-dependent" : ""} ${isDimmed() ? "is-dimmed" : ""}`,
-                        onClick: () => props.selectedId.set(node.id),
-                        onMouseEnter: () => setHoveredId(node.id),
-                        onMouseLeave: () => setHoveredId(null),
-                        children: [
-                          /* @__PURE__ */ jsxs("div", {
-                            class: "visage-graph-node-title",
-                            children: [
-                              /* @__PURE__ */ jsxs("span", {
-                                style: {
-                                  color: "#f8fafc",
-                                  display: "inline-flex",
-                                  alignItems: "center",
-                                  gap: "6px"
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsx("span", {
-                                    style: {
-                                      fontSize: "9px",
-                                      fontWeight: 700,
-                                      padding: "1px 4px",
-                                      borderRadius: "3px",
-                                      background: "#082f49",
-                                      color: "#38bdf8",
-                                      border: "1px solid #0369a1"
-                                    },
-                                    children: "SIG"
-                                  }),
-                                  /* @__PURE__ */ jsx("span", {
-                                    children: node.name
-                                  })
-                                ]
-                              }),
-                              /* @__PURE__ */ jsxs("span", {
-                                class: "visage-devtools-badge",
-                                children: [
-                                  "v",
-                                  () => node.version()
-                                ]
-                              })
-                            ]
-                          }),
-                          /* @__PURE__ */ jsx("div", {
-                            class: "visage-graph-node-val",
-                            children: () => JSON.stringify(node.getValue())
-                          }),
-                          /* @__PURE__ */ jsx("div", {
-                            style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" },
-                            children: () => dependents().length > 0 ? /* @__PURE__ */ jsxs("span", {
-                              style: { fontSize: "10px", color: "#94a3b8" },
-                              children: [
-                                dependents().length,
-                                " consumer",
-                                dependents().length > 1 ? "s" : ""
-                              ]
-                            }) : /* @__PURE__ */ jsx("span", {
-                              style: { fontSize: "10px", color: "#475569" },
-                              children: "Root State"
-                            })
-                          })
-                        ]
-                      });
-                    }
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx("div", {
-                style: {
-                  display: "flex",
-                  flexDirection: "column",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  color: "#334155",
-                  fontSize: "14px",
-                  fontWeight: 700,
-                  padding: "0 10px"
-                },
-                children: /* @__PURE__ */ jsx("span", {
-                  children: ">"
-                })
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                class: "visage-graph-column",
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    class: "visage-graph-col-header",
-                    children: [
-                      /* @__PURE__ */ jsx("span", {
-                        class: "visage-graph-pulse computed"
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        children: [
-                          "Derived Computeds (",
-                          () => computedSignals().length,
-                          ")"
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx(For, {
-                    each: computedSignals,
-                    children: (node) => {
-                      const isSelected = () => props.selectedId() === node.id;
-                      const isDep = () => focusedDeps().includes(node.id);
-                      const isTarget = () => focusedTargets().includes(node.id);
-                      const isDimmed = () => activeFocusId() !== null && !isSelected() && !isDep() && !isTarget();
-                      const deps = () => getDependencies(node);
-                      return /* @__PURE__ */ jsxs("div", {
-                        class: () => `visage-graph-node ${isSelected() ? "selected" : ""} ${isDep() ? "is-dependency" : ""} ${isTarget() ? "is-dependent" : ""} ${isDimmed() ? "is-dimmed" : ""}`,
-                        onClick: () => props.selectedId.set(node.id),
-                        onMouseEnter: () => setHoveredId(node.id),
-                        onMouseLeave: () => setHoveredId(null),
-                        children: [
-                          /* @__PURE__ */ jsxs("div", {
-                            class: "visage-graph-node-title",
-                            children: [
-                              /* @__PURE__ */ jsxs("span", {
-                                style: {
-                                  color: "#f8fafc",
-                                  display: "inline-flex",
-                                  alignItems: "center",
-                                  gap: "6px"
-                                },
-                                children: [
-                                  /* @__PURE__ */ jsx("span", {
-                                    style: {
-                                      fontSize: "9px",
-                                      fontWeight: 700,
-                                      padding: "1px 4px",
-                                      borderRadius: "3px",
-                                      background: "#3b0764",
-                                      color: "#c084fc",
-                                      border: "1px solid #581c87"
-                                    },
-                                    children: "CMP"
-                                  }),
-                                  /* @__PURE__ */ jsx("span", {
-                                    children: node.name
-                                  })
-                                ]
-                              }),
-                              /* @__PURE__ */ jsxs("span", {
-                                class: "visage-devtools-badge",
-                                style: { background: "#581c87", color: "#fff" },
-                                children: [
-                                  "v",
-                                  () => node.version()
-                                ]
-                              })
-                            ]
-                          }),
-                          /* @__PURE__ */ jsx("div", {
-                            class: "visage-graph-node-val",
-                            children: () => JSON.stringify(node.getValue())
-                          }),
-                          /* @__PURE__ */ jsx("div", {
-                            style: { marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" },
-                            children: () => deps().length > 0 ? deps().map((d) => /* @__PURE__ */ jsxs("span", {
-                              class: "visage-graph-pill source",
-                              onClick: (e) => {
-                                e.stopPropagation();
-                                props.selectedId.set(d.id);
-                              },
-                              children: [
-                                "in: ",
-                                d.name
-                              ]
-                            })) : /* @__PURE__ */ jsx("span", {
-                              style: { fontSize: "10px", color: "#64748b" },
-                              children: "Memoized"
-                            })
-                          })
-                        ]
-                      });
-                    }
-                  })
-                ]
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx(GraphInspector, {
-            selectedNode,
-            selectedId: props.selectedId,
-            getDependencies,
-            getDependents,
-            formatJSON: props.formatJSON
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/devtools/highlighter.ts
-var styleInjected = false;
-var activeTimeouts = new WeakMap;
-function injectHighlighterStyles() {
-  if (styleInjected || typeof document === "undefined")
-    return;
-  const style = document.createElement("style");
-  style.id = "visage-devtools-highlighter";
-  style.textContent = `
-    @keyframes visage-devtools-flash {
-      0% {
-        outline: 2px solid rgba(56, 189, 248, 0.9);
-        box-shadow: 0 0 12px rgba(56, 189, 248, 0.45);
-      }
-      100% {
-        outline: 2px solid transparent;
-        box-shadow: none;
-      }
-    }
-    .visage-dev-highlight {
-      outline-offset: -1px;
-      animation: visage-devtools-flash 0.5s ease-out !important;
-    }
-  `;
-  document.head.appendChild(style);
-  styleInjected = true;
-}
-function highlightElement(element) {
-  if (!element || typeof document === "undefined" || !(element instanceof Element))
-    return;
-  injectHighlighterStyles();
-  const prevTimeout = activeTimeouts.get(element);
-  if (prevTimeout) {
-    clearTimeout(prevTimeout);
-  }
-  element.classList.remove("visage-dev-highlight");
-  element.offsetWidth;
-  element.classList.add("visage-dev-highlight");
-  const timeout = setTimeout(() => {
-    element.classList.remove("visage-dev-highlight");
-    activeTimeouts.delete(element);
-  }, 500);
-  activeTimeouts.set(element, timeout);
-}
-var observer = null;
-function setupDomMutationHighlighter(enabledGetter) {
-  if (typeof window === "undefined" || typeof MutationObserver === "undefined")
-    return;
-  const startObserver = () => {
-    if (observer)
-      return;
-    injectHighlighterStyles();
-    observer = new MutationObserver((mutations) => {
-      if (!enabledGetter())
-        return;
-      const seen = new Set;
-      for (const mutation of mutations) {
-        const target = mutation.target;
-        let el = null;
-        if (target instanceof Element) {
-          el = target;
-        } else if (target.parentElement) {
-          el = target.parentElement;
-        }
-        if (!el)
-          continue;
-        if (el.closest?.(".visage-devtools-root") || el.closest?.("#visage-devtools-highlighter")) {
-          continue;
-        }
-        if (mutation.type === "attributes" && mutation.attributeName === "class") {
-          const oldCls = (mutation.oldValue || "").replace(/\bvisage-dev-highlight\b/g, "").replace(/\s+/g, " ").trim();
-          const newCls = (el.getAttribute("class") || "").replace(/\bvisage-dev-highlight\b/g, "").replace(/\s+/g, " ").trim();
-          if (oldCls === newCls) {
-            continue;
-          }
-        }
-        if (!seen.has(el)) {
-          seen.add(el);
-          highlightElement(el);
-        }
-      }
-    });
-    const targetNode = document.body || document.documentElement;
-    if (targetNode) {
-      observer.observe(targetNode, {
-        childList: true,
-        attributes: true,
-        attributeOldValue: true,
-        characterData: true,
-        subtree: true
-      });
-    }
-  };
-  const stopObserver = () => {
-    if (observer) {
-      observer.disconnect();
-      observer = null;
-    }
-  };
-  effect(() => {
-    if (enabledGetter()) {
-      startObserver();
-    } else {
-      stopObserver();
-    }
-  });
-  onCleanup(() => {
-    stopObserver();
-  });
-}
-
-// src/devtools/QueryTab.tsx
-function QueryTab(props) {
-  const filteredQueries = () => {
-    const q = props.searchQuery().toLowerCase().trim();
-    const list = props.hub.queriesList();
-    if (!q)
-      return list;
-    return list.filter((item) => item.hash.toLowerCase().includes(q) || JSON.stringify(item.key).toLowerCase().includes(q));
-  };
-  const selectedQuery = () => {
-    const id = props.selectedId();
-    if (!id)
-      return null;
-    return props.hub.queriesList().find((qr) => qr.hash === id) ?? null;
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    style: { display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" },
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        class: "visage-devtools-sidebar",
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            class: "visage-devtools-search",
-            children: /* @__PURE__ */ jsx("input", {
-              class: "visage-devtools-input",
-              placeholder: "Search query cache...",
-              value: props.searchQuery,
-              onInput: (e) => props.searchQuery.set(e.target.value)
-            })
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "visage-devtools-list",
-            children: /* @__PURE__ */ jsx(For, {
-              each: filteredQueries,
-              fallback: /* @__PURE__ */ jsx("div", {
-                style: { padding: "12px", color: "#64748b", fontSize: "12px" },
-                children: "No active queries in cache."
-              }),
-              children: (qr) => {
-                const isSelected = () => props.selectedId() === qr.hash;
-                return /* @__PURE__ */ jsxs("div", {
-                  class: () => `visage-devtools-item ${isSelected() ? "selected" : ""}`,
-                  onClick: () => props.selectedId.set(qr.hash),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "6px",
-                        overflow: "hidden"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          class: "visage-devtools-badge",
-                          style: {
-                            background: qr.status() === "success" ? "#065f46" : qr.status() === "error" ? "#991b1b" : "#854d0e",
-                            color: "#fff"
-                          },
-                          children: () => qr.status()
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          style: {
-                            fontWeight: 500,
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                          },
-                          children: JSON.stringify(qr.key)
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsx("span", {
-                      style: { fontSize: "10px", color: "#64748b" },
-                      children: () => qr.fetchStatus()
-                    })
-                  ]
-                });
-              }
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        class: "visage-devtools-main",
-        children: /* @__PURE__ */ jsx(Show, {
-          when: selectedQuery,
-          fallback: /* @__PURE__ */ jsx("div", {
-            style: { color: "#64748b", textAlign: "center", marginTop: "40px", fontSize: "13px" },
-            children: "Select a query from the cache list to view live cached response and trigger manual refetches."
-          }),
-          children: (qr) => /* @__PURE__ */ jsxs("div", {
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  marginBottom: "16px"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    children: [
-                      /* @__PURE__ */ jsx("h3", {
-                        style: { margin: 0, fontSize: "15px", color: "#f8fafc" },
-                        children: () => JSON.stringify(qr().key)
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        style: { fontSize: "11px", color: "#64748b" },
-                        children: [
-                          "Hash: ",
-                          () => qr().hash
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    style: { display: "flex", gap: "8px" },
-                    children: [
-                      /* @__PURE__ */ jsx("button", {
-                        type: "button",
-                        class: "visage-devtools-btn",
-                        onClick: () => qr().refetch?.(),
-                        children: "Refetch"
-                      }),
-                      /* @__PURE__ */ jsx("button", {
-                        type: "button",
-                        class: "visage-devtools-btn",
-                        onClick: () => qr().invalidate?.(),
-                        children: "Invalidate Cache"
-                      })
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                style: {
-                  display: "grid",
-                  gridTemplateColumns: "1fr 1fr",
-                  gap: "10px",
-                  marginBottom: "16px"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    style: {
-                      background: "#0c111d",
-                      padding: "10px",
-                      borderRadius: "6px",
-                      border: "1px solid #1e293b"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("div", {
-                        style: { fontSize: "11px", color: "#64748b" },
-                        children: "STATUS"
-                      }),
-                      /* @__PURE__ */ jsx("div", {
-                        style: { fontWeight: 600, color: "#38bdf8" },
-                        children: () => `${qr().status()} (${qr().fetchStatus()})`
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    style: {
-                      background: "#0c111d",
-                      padding: "10px",
-                      borderRadius: "6px",
-                      border: "1px solid #1e293b"
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("div", {
-                        style: { fontSize: "11px", color: "#64748b" },
-                        children: "LAST UPDATED"
-                      }),
-                      /* @__PURE__ */ jsx("div", {
-                        style: { fontWeight: 600, color: "#f1f5f9" },
-                        children: () => qr().dataUpdatedAt() ? new Date(qr().dataUpdatedAt()).toLocaleTimeString() : "Never"
-                      })
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx("div", {
-                style: { fontSize: "12px", color: "#94a3b8", marginBottom: "6px" },
-                children: "Cached Response Payload:"
-              }),
-              /* @__PURE__ */ jsx("pre", {
-                class: "visage-devtools-json",
-                children: () => props.formatJSON(qr().data())
-              })
-            ]
-          })
-        })
-      })
-    ]
-  });
-}
-
-// src/devtools/RpcTab.tsx
-function RpcTab(props) {
-  const filteredRpc = () => {
-    const q = props.searchQuery().toLowerCase().trim();
-    const list = props.hub.rpcLogs();
-    if (!q)
-      return list;
-    return list.filter((r) => r.path.toLowerCase().includes(q) || r.type.toLowerCase().includes(q));
-  };
-  const selectedRpc = () => {
-    const id = props.selectedId();
-    if (!id)
-      return null;
-    return props.hub.rpcLogs().find((r) => r.id === id) ?? null;
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    style: { display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" },
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        class: "visage-devtools-sidebar",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            class: "visage-devtools-search",
-            style: { display: "flex", gap: "6px" },
-            children: [
-              /* @__PURE__ */ jsx("input", {
-                class: "visage-devtools-input",
-                placeholder: "Filter RPC routes...",
-                value: props.searchQuery,
-                onInput: (e) => props.searchQuery.set(e.target.value)
-              }),
-              /* @__PURE__ */ jsx("button", {
-                type: "button",
-                class: "visage-devtools-btn",
-                onClick: () => props.hub.clearLogs(),
-                title: "Clear RPC Logs",
-                children: "Clear"
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "visage-devtools-list",
-            children: /* @__PURE__ */ jsx(For, {
-              each: filteredRpc,
-              fallback: /* @__PURE__ */ jsx("div", {
-                style: { padding: "12px", color: "#64748b", fontSize: "12px" },
-                children: "No RPC activity recorded yet."
-              }),
-              children: (r) => {
-                const isSelected = () => props.selectedId() === r.id;
-                return /* @__PURE__ */ jsxs("div", {
-                  class: () => `visage-devtools-item ${isSelected() ? "selected" : ""}`,
-                  onClick: () => props.selectedId.set(r.id),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", {
-                      style: {
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "6px",
-                        overflow: "hidden"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          class: "visage-devtools-badge",
-                          style: {
-                            background: r.type === "mutation" ? "#c026d3" : r.type === "subscription" ? "#7c3aed" : "#0284c7",
-                            color: "#fff"
-                          },
-                          children: r.type.slice(0, 3).toUpperCase()
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          style: {
-                            fontWeight: 500,
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "nowrap"
-                          },
-                          children: r.path
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsxs("div", {
-                      style: { display: "flex", alignItems: "center", gap: "6px" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          style: {
-                            fontSize: "11px",
-                            color: r.status === "success" ? "#10b981" : r.status === "error" ? "#ef4444" : "#f59e0b"
-                          },
-                          children: r.status
-                        }),
-                        r.duration !== undefined ? /* @__PURE__ */ jsxs("span", {
-                          style: { fontSize: "10px", color: "#64748b" },
-                          children: [
-                            r.duration,
-                            "ms"
-                          ]
-                        }) : null
-                      ]
-                    })
-                  ]
-                });
-              }
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        class: "visage-devtools-main",
-        children: /* @__PURE__ */ jsx(Show, {
-          when: selectedRpc,
-          fallback: /* @__PURE__ */ jsx("div", {
-            style: { color: "#64748b", textAlign: "center", marginTop: "40px", fontSize: "13px" },
-            children: "Select an RPC procedure call from the left to inspect full payload, latency, and streaming SSE frames."
-          }),
-          children: (r) => /* @__PURE__ */ jsxs("div", {
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  marginBottom: "16px"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    children: [
-                      /* @__PURE__ */ jsx("h3", {
-                        style: { margin: 0, fontSize: "16px", color: "#f8fafc" },
-                        children: () => `${r().type.toUpperCase()}: ${r().path}`
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        style: { fontSize: "11px", color: "#64748b" },
-                        children: [
-                          "Call ID: ",
-                          () => r().id
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsx("span", {
-                    class: "visage-devtools-badge",
-                    style: { fontSize: "12px", padding: "3px 8px" },
-                    children: () => r().duration !== undefined ? `${r().duration}ms` : "Active"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsxs("div", {
-                style: { marginBottom: "12px" },
-                children: [
-                  /* @__PURE__ */ jsx("div", {
-                    style: { fontSize: "12px", color: "#94a3b8", marginBottom: "4px" },
-                    children: "Input Parameters:"
-                  }),
-                  /* @__PURE__ */ jsx("pre", {
-                    class: "visage-devtools-json",
-                    children: () => props.formatJSON(r().input)
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx(Show, {
-                when: () => r().response !== undefined,
-                children: /* @__PURE__ */ jsxs("div", {
-                  style: { marginBottom: "12px" },
-                  children: [
-                    /* @__PURE__ */ jsx("div", {
-                      style: { fontSize: "12px", color: "#94a3b8", marginBottom: "4px" },
-                      children: "Server Response:"
-                    }),
-                    /* @__PURE__ */ jsx("pre", {
-                      class: "visage-devtools-json",
-                      children: () => props.formatJSON(r().response)
-                    })
-                  ]
-                })
-              }),
-              /* @__PURE__ */ jsx(Show, {
-                when: () => (r().events?.length ?? 0) > 0,
-                children: /* @__PURE__ */ jsxs("div", {
-                  children: [
-                    /* @__PURE__ */ jsxs("div", {
-                      style: { fontSize: "12px", color: "#94a3b8", marginBottom: "4px" },
-                      children: [
-                        "Live SSE Event Stream (",
-                        () => r().events?.length ?? 0,
-                        " frames):"
-                      ]
-                    }),
-                    /* @__PURE__ */ jsx("pre", {
-                      class: "visage-devtools-json",
-                      children: () => props.formatJSON(r().events)
-                    })
-                  ]
-                })
-              })
-            ]
-          })
-        })
-      })
-    ]
-  });
-}
-
-// src/devtools/SignalsTab.tsx
-function SignalsTab(props) {
-  const filteredSignals = () => {
-    const q = props.searchQuery().toLowerCase().trim();
-    const list = props.hub.signalsList();
-    if (!q)
-      return list;
-    return list.filter((s) => s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q));
-  };
-  const selectedSignal = () => {
-    const id = props.selectedId();
-    if (!id)
-      return null;
-    return props.hub.signalsList().find((s) => s.id === id) ?? null;
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    style: { display: "flex", flex: 1, width: "100%", height: "100%", overflow: "hidden" },
-    children: [
-      /* @__PURE__ */ jsxs("div", {
-        class: "visage-devtools-sidebar",
-        children: [
-          /* @__PURE__ */ jsx("div", {
-            class: "visage-devtools-search",
-            children: /* @__PURE__ */ jsx("input", {
-              class: "visage-devtools-input",
-              placeholder: "Search signals...",
-              value: props.searchQuery,
-              onInput: (e) => props.searchQuery.set(e.target.value)
-            })
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "visage-devtools-list",
-            children: /* @__PURE__ */ jsx(For, {
-              each: filteredSignals,
-              children: (sig) => {
-                const isSelected = () => props.selectedId() === sig.id;
-                return /* @__PURE__ */ jsxs("div", {
-                  class: () => `visage-devtools-item ${sig.type} ${isSelected() ? "selected" : ""}`,
-                  onClick: () => props.selectedId.set(sig.id),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", {
-                      style: { display: "flex", alignItems: "center", gap: "8px" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          style: {
-                            fontSize: "9px",
-                            fontWeight: 700,
-                            padding: "1px 4px",
-                            borderRadius: "3px",
-                            background: sig.type === "computed" ? "#3b0764" : "#082f49",
-                            color: sig.type === "computed" ? "#c084fc" : "#38bdf8",
-                            border: `1px solid ${sig.type === "computed" ? "#581c87" : "#0369a1"}`
-                          },
-                          children: sig.type === "computed" ? "CMP" : "SIG"
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          style: { fontWeight: 500, color: "#f1f5f9" },
-                          children: sig.name
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsxs("span", {
-                      class: "visage-devtools-badge",
-                      children: [
-                        "v",
-                        () => sig.version()
-                      ]
-                    })
-                  ]
-                });
-              }
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        class: "visage-devtools-main",
-        children: /* @__PURE__ */ jsx(Show, {
-          when: selectedSignal,
-          fallback: /* @__PURE__ */ jsx("div", {
-            style: {
-              color: "#64748b",
-              textAlign: "center",
-              marginTop: "40px",
-              fontSize: "13px"
-            },
-            children: "Select a signal or computed from the left to inspect its live reactive value."
-          }),
-          children: (sig) => /* @__PURE__ */ jsxs("div", {
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                style: {
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  marginBottom: "16px"
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("div", {
-                    children: [
-                      /* @__PURE__ */ jsx("h3", {
-                        style: { margin: 0, fontSize: "16px", color: "#f8fafc" },
-                        children: () => sig().name
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        style: { fontSize: "11px", color: "#64748b" },
-                        children: [
-                          "ID: ",
-                          () => sig().id
-                        ]
-                      })
-                    ]
-                  }),
-                  /* @__PURE__ */ jsxs("div", {
-                    style: { display: "flex", gap: "8px" },
-                    children: [
-                      /* @__PURE__ */ jsx("span", {
-                        class: "visage-devtools-badge",
-                        style: {
-                          background: () => sig().type === "computed" ? "#581c87" : "#0369a1",
-                          color: "#fff"
-                        },
-                        children: () => sig().type.toUpperCase()
-                      }),
-                      /* @__PURE__ */ jsxs("span", {
-                        class: "visage-devtools-badge",
-                        children: [
-                          "VERSION: ",
-                          () => sig().version()
-                        ]
-                      })
-                    ]
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx("div", {
-                style: { marginBottom: "12px", fontSize: "12px", color: "#94a3b8" },
-                children: "Current Reactive Value:"
-              }),
-              /* @__PURE__ */ jsx("pre", {
-                class: "visage-devtools-json",
-                children: () => props.formatJSON(sig().getValue())
-              })
-            ]
-          })
-        })
-      })
-    ]
-  });
-}
-
-// src/devtools/styles.ts
-var devtoolsStyles = `
-  .visage-devtools-root {
-    position: fixed;
-    z-index: 999999;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    font-size: 13px;
-    color: #f1f5f9;
-    box-sizing: border-box;
-  }
-  .visage-devtools-root * {
-    box-sizing: border-box;
-  }
-  .visage-devtools-trigger {
-    position: fixed;
-    bottom: 20px;
-    left: 20px;
-    background: #0f172a;
-    color: #38bdf8;
-    border: 1px solid #334155;
-    border-radius: 9999px;
-    padding: 8px 14px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-    font-weight: 600;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.2);
-    transition: all 0.2s ease;
-    z-index: 999999;
-  }
-  .visage-devtools-trigger:hover {
-    background: #1e293b;
-    border-color: #38bdf8;
-    transform: translateY(-2px);
-  }
-  .visage-devtools-drawer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 420px;
-    background: #090d16;
-    border-top: 1px solid #1e293b;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 0 -20px 25px -5px rgba(0, 0, 0, 0.7);
-    z-index: 999999;
-  }
-  .visage-devtools-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px 16px;
-    background: #0f172a;
-    border-bottom: 1px solid #1e293b;
-  }
-  .visage-devtools-tabs {
-    display: flex;
-    gap: 4px;
-  }
-  .visage-devtools-tab {
-    background: transparent;
-    border: none;
-    color: #94a3b8;
-    padding: 6px 12px;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 12px;
-    font-weight: 500;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-  .visage-devtools-tab:hover {
-    color: #f1f5f9;
-    background: #1e293b;
-  }
-  .visage-devtools-tab.active {
-    color: #38bdf8;
-    background: #1e293b;
-    font-weight: 600;
-  }
-  .visage-devtools-badge {
-    background: #334155;
-    color: #f1f5f9;
-    padding: 1px 6px;
-    border-radius: 9999px;
-    font-size: 10px;
-    font-weight: 600;
-  }
-  .visage-devtools-body {
-    flex: 1;
-    display: flex;
-    overflow: hidden;
-  }
-  .visage-devtools-sidebar {
-    width: 320px;
-    border-right: 1px solid #1e293b;
-    display: flex;
-    flex-direction: column;
-    background: #0c111d;
-  }
-  .visage-devtools-search {
-    padding: 8px;
-    border-bottom: 1px solid #1e293b;
-  }
-  .visage-devtools-input {
-    width: 100%;
-    background: #090d16;
-    border: 1px solid #334155;
-    border-radius: 6px;
-    color: #f1f5f9;
-    padding: 6px 10px;
-    font-size: 12px;
-    outline: none;
-  }
-  .visage-devtools-input:focus {
-    border-color: #38bdf8;
-  }
-  .visage-devtools-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 4px;
-  }
-  .visage-devtools-item {
-    padding: 8px 10px;
-    border-radius: 6px;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 2px;
-    font-size: 12px;
-  }
-  .visage-devtools-item:hover {
-    background: #1e293b;
-  }
-  .visage-devtools-item.selected {
-    background: #1e293b;
-    border-left: 3px solid #38bdf8;
-  }
-  .visage-devtools-main {
-    flex: 1;
-    padding: 16px;
-    overflow-y: auto;
-    background: #090d16;
-  }
-  .visage-devtools-json {
-    background: #050811;
-    border: 1px solid #1e293b;
-    border-radius: 6px;
-    padding: 12px;
-    font-family: "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
-    font-size: 12px;
-    color: #38bdf8;
-    overflow-x: auto;
-    white-space: pre-wrap;
-  }
-  .visage-devtools-actions {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .visage-devtools-btn {
-    background: #1e293b;
-    border: 1px solid #334155;
-    color: #f1f5f9;
-    padding: 4px 10px;
-    border-radius: 4px;
-    font-size: 11px;
-    cursor: pointer;
-    font-weight: 500;
-  }
-  .visage-devtools-btn:hover {
-    background: #334155;
-  }
-  .visage-devtools-btn.active {
-    background: #0284c7;
-    border-color: #38bdf8;
-  }
-  /* DAG Graph Visualization */
-  .visage-graph-container {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: #050811;
-    position: relative;
-  }
-  .visage-graph-toolbar {
-    padding: 8px 16px;
-    background: #090d16;
-    border-bottom: 1px solid #1e293b;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-  }
-  .visage-graph-canvas {
-    flex: 1;
-    overflow: auto;
-    padding: 24px;
-    position: relative;
-    display: flex;
-    gap: 40px;
-  }
-  .visage-graph-column {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    min-width: 220px;
-  }
-  .visage-graph-col-header {
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: #64748b;
-    margin-bottom: 4px;
-    display: flex;
-    align-items: center;
-    gap: 6px;
-  }
-  .visage-graph-node {
-    background: #0f172a;
-    border: 1px solid #1e293b;
-    border-radius: 8px;
-    padding: 10px 12px;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-  }
-  .visage-graph-node:hover {
-    border-color: #38bdf8;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);
-  }
-  .visage-graph-node.selected {
-    border-color: #38bdf8;
-    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);
-    background: #131d35;
-  }
-  .visage-graph-node.is-dependency {
-    border-color: #38bdf8;
-    box-shadow: 0 0 0 1px #38bdf8, 0 2px 8px rgba(56, 189, 248, 0.25);
-    background: #082f49;
-  }
-  .visage-graph-node.is-dependent {
-    border-color: #c084fc;
-    box-shadow: 0 0 0 1px #c084fc, 0 2px 8px rgba(192, 132, 252, 0.25);
-    background: #3b0764;
-  }
-  .visage-graph-node.is-dimmed {
-    opacity: 0.3;
-    filter: grayscale(0.5);
-  }
-  .visage-graph-node-title {
-    font-weight: 600;
-    font-size: 12px;
-    color: #f8fafc;
-    margin-bottom: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  .visage-graph-node-val {
-    font-family: monospace;
-    font-size: 11px;
-    color: #94a3b8;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 190px;
-  }
-  .visage-graph-pulse {
-    display: inline-block;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #10b981;
-    box-shadow: 0 0 8px #10b981;
-  }
-  .visage-graph-pulse.computed {
-    background: #a855f7;
-    box-shadow: 0 0 8px #a855f7;
-  }
-  .visage-graph-pill {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    background: #1e293b;
-    color: #cbd5e1;
-    padding: 3px 8px;
-    border-radius: 4px;
-    font-size: 11px;
-    cursor: pointer;
-    border: 1px solid #334155;
-    transition: all 0.15s ease;
-  }
-  .visage-graph-pill:hover {
-    background: #334155;
-    color: #fff;
-    border-color: #38bdf8;
-  }
-  .visage-graph-pill.source {
-    border-color: #0369a1;
-    color: #7dd3fc;
-  }
-  .visage-graph-pill.target {
-    border-color: #7e22ce;
-    color: #d8b4fe;
-  }
-`;
-
-// src/devtools/component.tsx
-function VisageDevTools(props = {}) {
-  if (typeof window === "undefined") {
-    return null;
-  }
-  const hub = devtoolsHub;
-  if (typeof window !== "undefined" && !window.__VISAGE_DEVTOOLS__) {
-    window.__VISAGE_DEVTOOLS__ = hub;
-  }
-  if (props.initialOpen !== undefined) {
-    hub.isOpen.set(props.initialOpen);
-  }
-  if (props.initialTab !== undefined) {
-    hub.activeTab.set(props.initialTab);
-  }
-  if (props.highlightDOM !== undefined) {
-    hub.highlightDOM.set(props.highlightDOM);
-  }
-  setupDomMutationHighlighter(() => hub.highlightDOM());
-  const selectedId = signal(null, { internal: true });
-  const searchQuery = signal("", { internal: true });
-  if (typeof window !== "undefined") {
-    const handleKeyDown = (e) => {
-      if (e.shiftKey && e.altKey && e.key.toLowerCase() === "v") {
-        e.preventDefault();
-        hub.toggle();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    onCleanup(() => window.removeEventListener("keydown", handleKeyDown));
-  }
-  const formatJSON = (val) => {
-    try {
-      if (val === undefined)
-        return "undefined";
-      return JSON.stringify(val, null, 2);
-    } catch {
-      return String(val);
-    }
-  };
-  return /* @__PURE__ */ jsxs("div", {
-    class: "visage-devtools-root",
-    children: [
-      /* @__PURE__ */ jsx(Style, {
-        children: devtoolsStyles
-      }),
-      () => !hub.isOpen() ? /* @__PURE__ */ jsx(Tooltip, {
-        content: "Press Shift+Alt+V to toggle Visage DevTools",
-        side: "top",
-        children: /* @__PURE__ */ jsxs("button", {
-          type: "button",
-          class: "visage-devtools-trigger",
-          onClick: () => hub.toggle(),
-          "aria-label": "Open Visage DevTools",
-          children: [
-            /* @__PURE__ */ jsx("svg", {
-              "aria-hidden": "true",
-              width: "14",
-              height: "14",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              "stroke-width": "2",
-              "stroke-linecap": "round",
-              "stroke-linejoin": "round",
-              children: /* @__PURE__ */ jsx("path", {
-                d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z"
-              })
-            }),
-            /* @__PURE__ */ jsx("span", {
-              children: "DevTools"
-            })
-          ]
-        })
-      }) : /* @__PURE__ */ jsxs("div", {
-        class: "visage-devtools-drawer",
-        role: "dialog",
-        "aria-label": "Visage In-Browser DevTools",
-        children: [
-          /* @__PURE__ */ jsxs("div", {
-            class: "visage-devtools-header",
-            children: [
-              /* @__PURE__ */ jsxs("div", {
-                style: { display: "flex", alignItems: "center", gap: "8px" },
-                children: [
-                  /* @__PURE__ */ jsx("svg", {
-                    "aria-hidden": "true",
-                    width: "14",
-                    height: "14",
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "#38bdf8",
-                    "stroke-width": "2",
-                    "stroke-linecap": "round",
-                    "stroke-linejoin": "round",
-                    children: /* @__PURE__ */ jsx("path", {
-                      d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z"
-                    })
-                  }),
-                  /* @__PURE__ */ jsx("strong", {
-                    style: {
-                      fontSize: "12px",
-                      letterSpacing: "0.04em",
-                      color: "#f8fafc",
-                      fontWeight: 700
-                    },
-                    children: "VISAGE"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx(Tabs, {
-                value: () => hub.activeTab(),
-                onValueChange: (val) => {
-                  hub.setTab(val);
-                  selectedId.set(null);
-                },
-                listClass: "visage-devtools-tabs",
-                items: [
-                  {
-                    value: "signals",
-                    label: () => /* @__PURE__ */ jsxs("span", {
-                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          children: "Signals"
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          class: "visage-devtools-badge",
-                          children: () => hub.signalsList().length
-                        })
-                      ]
-                    })
-                  },
-                  {
-                    value: "graph",
-                    label: () => /* @__PURE__ */ jsxs("span", {
-                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          children: "DAG Graph"
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          class: "visage-devtools-badge",
-                          style: { background: "#581c87", color: "#fff" },
-                          children: "LIVE"
-                        })
-                      ]
-                    })
-                  },
-                  {
-                    value: "query",
-                    label: () => /* @__PURE__ */ jsxs("span", {
-                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          children: "Query Cache"
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          class: "visage-devtools-badge",
-                          children: () => hub.queriesList().length
-                        })
-                      ]
-                    })
-                  },
-                  {
-                    value: "rpc",
-                    label: () => /* @__PURE__ */ jsxs("span", {
-                      style: { display: "inline-flex", alignItems: "center", gap: "6px" },
-                      children: [
-                        /* @__PURE__ */ jsx("span", {
-                          children: "RPC"
-                        }),
-                        /* @__PURE__ */ jsx("span", {
-                          class: "visage-devtools-badge",
-                          children: () => hub.rpcLogs().length
-                        })
-                      ]
-                    })
-                  },
-                  {
-                    value: "dom",
-                    label: "DOM Inspector"
-                  }
-                ]
-              }),
-              /* @__PURE__ */ jsx("div", {
-                class: "visage-devtools-actions",
-                children: /* @__PURE__ */ jsx("button", {
-                  type: "button",
-                  class: "visage-devtools-btn",
-                  onClick: () => hub.isOpen.set(false),
-                  title: "Close DevTools (Shift+Alt+V)",
-                  children: "Close"
-                })
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx("div", {
-            class: "visage-devtools-body",
-            children: () => {
-              const tab = hub.activeTab();
-              if (tab === "signals") {
-                return /* @__PURE__ */ jsx(SignalsTab, {
-                  hub,
-                  selectedId,
-                  searchQuery,
-                  formatJSON
-                });
-              }
-              if (tab === "graph") {
-                return /* @__PURE__ */ jsx(GraphTab, {
-                  hub,
-                  selectedId,
-                  searchQuery,
-                  formatJSON
-                });
-              }
-              if (tab === "query") {
-                return /* @__PURE__ */ jsx(QueryTab, {
-                  hub,
-                  selectedId,
-                  searchQuery,
-                  formatJSON
-                });
-              }
-              if (tab === "rpc") {
-                return /* @__PURE__ */ jsx(RpcTab, {
-                  hub,
-                  selectedId,
-                  searchQuery,
-                  formatJSON
-                });
-              }
-              return /* @__PURE__ */ jsx(DomTab, {
-                hub
-              });
-            }
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/devtools/index.ts
-function connectDevTools(client) {
-  devtoolsHub.attachQueryClient(client);
-}
+import {
+  DevToolsHub2,
+  devtoolsHub2,
+  highlightElement2,
+  VisageDevTools2,
+  connectDevTools2
+} from "../index-zr6cvset.js";
+import"../index-8x8xz80v.js";
+import"../index-0madxn60.js";
+import"../index-9fvarkrx.js";
+import"../index-5s255b3w.js";
+import"../index-a4xns6cc.js";
+import"../index-6kfe1nr4.js";
 export {
-  DevToolsHub,
-  VisageDevTools,
-  connectDevTools,
-  devtoolsHub,
-  highlightElement
+  DevToolsHub2 as DevToolsHub,
+  VisageDevTools2 as VisageDevTools,
+  connectDevTools2 as connectDevTools,
+  devtoolsHub2 as devtoolsHub,
+  highlightElement2 as highlightElement
 };