@vscode/component-explorer 0.1.1-12 → 0.1.1-14

package/dist/viewer.js

@@ -1,34 +1,34 @@
 var mt = Object.defineProperty;
 var vt = (r, e, t) => e in r ? mt(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
 var l = (r, e, t) => vt(r, typeof e != "symbol" ? e + "" : e, t);
-import { f as Se, a as we, s as Re } from "./index-DnRcKk60.js";
-import { b as Mn, d as Fn, c as En, e as Bn, g as An } from "./index-DnRcKk60.js";
+import { f as we, a as Re, s as Te } from "./index-DnRcKk60.js";
+import { b as Dn, d as Fn, c as En, e as Bn, g as An } from "./index-DnRcKk60.js";
 import { createRoot as _t } from "react-dom/client";
-import { createContext as Ue, useReducer as bt, useState as yt, useContext as xt, useEffect as Te, createElement as Ct } from "react";
-import { jsx as a, jsxs as f, Fragment as pe } from "react/jsx-runtime";
-import { unstable_batchedUpdates as Pe } from "react-dom";
-function ge(r) {
-  return typeof r == "object" && r !== null && Re in r && r[Re] === !0 && "_options" in r && typeof r._options == "object";
-}
+import { createContext as Pe, useReducer as bt, useState as yt, useContext as xt, useEffect as Ie, createElement as Ct } from "react";
+import { jsx as a, jsxs as p, Fragment as ge } from "react/jsx-runtime";
+import { unstable_batchedUpdates as We } from "react-dom";
 function me(r) {
-  return typeof r == "object" && r !== null && Se in r && r[Se] === !0 && "_entries" in r && typeof r._entries == "object";
+  return typeof r == "object" && r !== null && Te in r && r[Te] === !0 && "_options" in r && typeof r._options == "object";
 }
 function ve(r) {
-  return typeof r == "object" && r !== null && we in r && r[we] === !0 && "_variants" in r && typeof r._variants == "object";
+  return typeof r == "object" && r !== null && we in r && r[we] === !0 && "_entries" in r && typeof r._entries == "object";
+}
+function _e(r) {
+  return typeof r == "object" && r !== null && Re in r && r[Re] === !0 && "_variants" in r && typeof r._variants == "object";
 }
 function wn(r) {
-  return ge(r) ? { success: !0, data: r } : me(r) ? { success: !0, data: r } : ve(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a valid fixture export (missing brand symbol or _options/_entries/_variants)" };
+  return me(r) ? { success: !0, data: r } : ve(r) ? { success: !0, data: r } : _e(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a valid fixture export (missing brand symbol or _options/_entries/_variants)" };
 }
 function Rn(r) {
-  return ge(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a SingleFixtureExport" };
+  return me(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a SingleFixtureExport" };
 }
 function Tn(r) {
-  return me(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a FixtureGroupExport" };
+  return ve(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a FixtureGroupExport" };
 }
 function In(r) {
-  return ve(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a FixtureVariantsExport" };
+  return _e(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a FixtureVariantsExport" };
 }
-function Ie(r, e, t) {
+function Oe(r, e, t) {
   const n = r._options;
   return {
     id: e,
@@ -59,7 +59,7 @@ function Rt(r) {
     e[t.name] = t.defaultValue;
   return e;
 }
-function oe(r) {
+function ie(r) {
   const e = {
     id: "",
     name: "Components",
@@ -68,24 +68,24 @@ function oe(r) {
   };
   for (const [t, n] of r) {
     const s = Tt(t);
-    We(e, [s], n);
+    Ge(e, [s], n);
   }
   return e;
 }
 function Tt(r) {
   return (r.split("/").pop() ?? r).replace(/\.fixture\.(tsx?|jsx?)$/, "");
 }
-function We(r, e, t) {
+function Ge(r, e, t) {
   var n;
-  if (ge(t)) {
+  if (me(t)) {
     const s = e.join("/"), o = e[e.length - 1], i = {
       id: s,
       name: o,
       type: "component",
-      component: Ie(t, s, o)
+      component: Oe(t, s, o)
     };
     r.children || (r.children = []), r.children.push(i);
-  } else if (me(t)) {
+  } else if (ve(t)) {
     const s = e[e.length - 1], o = e.join("/");
     let i = (n = r.children) == null ? void 0 : n.find(
       (d) => d.type === "folder" && d.name === s
@@ -97,8 +97,8 @@ function We(r, e, t) {
       children: []
     }, r.children || (r.children = []), r.children.push(i));
     for (const [d, c] of Object.entries(t._entries))
-      We(i, [...e, d], c);
-  } else if (ve(t)) {
+      Ge(i, [...e, d], c);
+  } else if (_e(t)) {
     const s = e[e.length - 1], i = {
       id: e.join("/"),
       name: s,
@@ -107,17 +107,17 @@ function We(r, e, t) {
     };
     r.children || (r.children = []), r.children.push(i);
     for (const [d, c] of Object.entries(t._variants)) {
-      const g = [...e, d].join("/"), _ = {
-        id: g,
+      const m = [...e, d].join("/"), v = {
+        id: m,
         name: d,
         type: "component",
-        component: Ie(c, g, d)
+        component: Oe(c, m, d)
       };
-      i.children.push(_);
+      i.children.push(v);
     }
   }
 }
-function Oe(r, e) {
+function ke(r, e) {
   if (e.length === 0)
     return r;
   let t = r;
@@ -138,19 +138,19 @@ function It(r) {
 }
 let $;
 function Ot(r) {
-  $ ? $ instanceof ke ? $.loggers.push(r) : $ = new ke([$, r]) : $ = r;
+  $ ? $ instanceof Ve ? $.loggers.push(r) : $ = new Ve([$, r]) : $ = r;
 }
-function b() {
+function C() {
   return $;
 }
-let ie;
+let ae;
 function kt(r) {
-  ie = r;
+  ae = r;
 }
 function Vt(r) {
-  ie && ie(r);
+  ae && ae(r);
 }
-class ke {
+class Ve {
   constructor(e) {
     this.loggers = e;
   }
@@ -203,7 +203,7 @@ class ke {
       t.handleEndTransaction(e);
   }
 }
-var D;
+var F;
 (function(r) {
   let e = !1;
   function t() {
@@ -220,16 +220,16 @@ var D;
     const i = Error, d = i.stackTraceLimit;
     i.stackTraceLimit = 3;
     const c = new Error().stack;
-    return i.stackTraceLimit = d, _e.fromStack(c, o + 1);
+    return i.stackTraceLimit = d, be.fromStack(c, o + 1);
   }
   r.ofNthCaller = s;
-})(D || (D = {}));
-class _e {
+})(F || (F = {}));
+class be {
   static fromStack(e, t) {
     const n = e.split(`
 `), s = Nt(n[t + 1]);
     if (s)
-      return new _e(s.fileName, s.line, s.column, s.id);
+      return new be(s.fileName, s.line, s.column, s.id);
   }
   constructor(e, t, n, s) {
     this.fileName = e, this.line = t, this.column = n, this.id = s;
@@ -255,29 +255,29 @@ function Nt(r) {
       id: r
     };
 }
-class M {
+class E {
   constructor(e, t, n) {
     this.owner = e, this.debugNameSource = t, this.referenceFn = n;
   }
   getDebugName(e) {
-    return Dt(e, this);
+    return Mt(e, this);
   }
 }
-const Ve = /* @__PURE__ */ new Map(), ae = /* @__PURE__ */ new WeakMap();
-function Dt(r, e) {
-  const t = ae.get(r);
+const Ne = /* @__PURE__ */ new Map(), de = /* @__PURE__ */ new WeakMap();
+function Mt(r, e) {
+  const t = de.get(r);
   if (t)
     return t;
-  const n = Mt(r, e);
+  const n = Dt(r, e);
   if (n) {
-    let s = Ve.get(n) ?? 0;
-    s++, Ve.set(n, s);
+    let s = Ne.get(n) ?? 0;
+    s++, Ne.set(n, s);
     const o = s === 1 ? n : `${n}#${s}`;
-    return ae.set(r, o), o;
+    return de.set(r, o), o;
   }
 }
-function Mt(r, e) {
-  const t = ae.get(r);
+function Dt(r, e) {
+  const t = de.get(r);
   if (t)
     return t;
   const n = e.owner ? Et(e.owner) + "." : "";
@@ -290,7 +290,7 @@ function Mt(r, e) {
     } else
       return n + o;
   const i = e.referenceFn;
-  if (i !== void 0 && (s = be(i), s !== void 0))
+  if (i !== void 0 && (s = ye(i), s !== void 0))
     return n + s;
   if (e.owner !== void 0) {
     const d = Ft(e.owner, r);
@@ -303,42 +303,42 @@ function Ft(r, e) {
     if (r[t] === e)
       return t;
 }
-const Ne = /* @__PURE__ */ new Map(), De = /* @__PURE__ */ new WeakMap();
+const Me = /* @__PURE__ */ new Map(), De = /* @__PURE__ */ new WeakMap();
 function Et(r) {
   const e = De.get(r);
   if (e)
     return e;
-  const t = Ge(r) ?? "Object";
-  let n = Ne.get(t) ?? 0;
-  n++, Ne.set(t, n);
+  const t = qe(r) ?? "Object";
+  let n = Me.get(t) ?? 0;
+  n++, Me.set(t, n);
   const s = n === 1 ? t : `${t}#${n}`;
   return De.set(r, s), s;
 }
-function Ge(r) {
+function qe(r) {
   const e = r.constructor;
   if (e)
     return e.name === "Object" ? void 0 : e.name;
 }
-function be(r) {
+function ye(r) {
   const e = r.toString(), n = /\/\*\*\s*@description\s*([^*]*)\*\//.exec(e), s = n ? n[1] : void 0;
   return s == null ? void 0 : s.trim();
 }
-let de;
+let ce;
 function Bt(r) {
-  de = r;
-}
-let qe;
-function At(r) {
-  qe = r;
+  ce = r;
 }
 let Ke;
-function zt(r) {
+function At(r) {
   Ke = r;
 }
 let Je;
-function $t(r) {
+function zt(r) {
   Je = r;
 }
+let Ze;
+function $t(r) {
+  Ze = r;
+}
 class Lt {
   get TChange() {
     return null;
@@ -350,12 +350,12 @@ class Lt {
   read(e) {
     return e ? e.readObservable(this) : this.get();
   }
-  map(e, t, n = D.ofCaller()) {
+  map(e, t, n = F.ofCaller()) {
     const s = t === void 0 ? void 0 : e, o = t === void 0 ? e : t;
-    return de({
+    return ce({
       owner: s,
       debugName: () => {
-        const i = be(o);
+        const i = ye(o);
         if (i !== void 0)
           return i;
         const c = /^\s*\(?\s*([a-zA-Z_$][a-zA-Z_$0-9]*)\s*\)?\s*=>\s*\1(?:\??)\.([a-zA-Z_$][a-zA-Z_$0-9]*)\s*$/.exec(o.toString());
@@ -372,13 +372,13 @@ class Lt {
    * Converts an observable of an observable value into a direct observable of the value.
   */
   flatten() {
-    return de({
+    return ce({
       owner: void 0,
       debugName: () => `${this.debugName} (flattened)`
     }, (e) => this.read(e).read(e));
   }
   recomputeInitiallyAndOnChange(e, t) {
-    return e.add(qe(this, t)), this;
+    return e.add(Ke(this, t)), this;
   }
   /**
    * Ensures that this observable is observed. This keeps the cache alive.
@@ -386,29 +386,29 @@ class Lt {
    * Use `recomputeInitiallyAndOnChange` for eager evaluation.
    */
   keepObserved(e) {
-    return e.add(Ke(this)), this;
+    return e.add(Je(this)), this;
   }
   get debugValue() {
     return this.get();
   }
   debugGetDependencyGraph() {
-    return Je(this);
+    return Ze(this);
   }
 }
-class ye extends Lt {
+class xe extends Lt {
   constructor(e) {
     var t;
-    super(), this._observers = /* @__PURE__ */ new Set(), (t = b()) == null || t.handleObservableCreated(this, e);
+    super(), this._observers = /* @__PURE__ */ new Set(), (t = C()) == null || t.handleObservableCreated(this, e);
   }
   addObserver(e) {
     var n;
     const t = this._observers.size;
-    this._observers.add(e), t === 0 && this.onFirstObserverAdded(), t !== this._observers.size && ((n = b()) == null || n.handleOnListenerCountChanged(this, this._observers.size));
+    this._observers.add(e), t === 0 && this.onFirstObserverAdded(), t !== this._observers.size && ((n = C()) == null || n.handleOnListenerCountChanged(this, this._observers.size));
   }
   removeObserver(e) {
     var n;
     const t = this._observers.delete(e);
-    t && this._observers.size === 0 && this.onLastObserverRemoved(), t && ((n = b()) == null || n.handleOnListenerCountChanged(this, this._observers.size));
+    t && this._observers.size === 0 && this.onLastObserverRemoved(), t && ((n = C()) == null || n.handleOnListenerCountChanged(this, this._observers.size));
   }
   onFirstObserverAdded() {
   }
@@ -416,14 +416,14 @@ class ye extends Lt {
   }
   log() {
     var t;
-    const e = !!b();
-    return Vt(this), e || (t = b()) == null || t.handleObservableCreated(this, D.ofCaller()), this;
+    const e = !!C();
+    return Vt(this), e || (t = C()) == null || t.handleObservableCreated(this, F.ofCaller()), this;
   }
   debugGetObservers() {
     return this._observers;
   }
 }
-function Ze(r) {
+function Xe(r) {
   return {
     dispose: r
   };
@@ -433,7 +433,7 @@ class H extends Error {
     super(e || "An unexpected bug occurred."), Object.setPrototypeOf(this, H.prototype);
   }
 }
-function te(r) {
+function re(r) {
   throw r;
 }
 function Ht(r) {
@@ -482,7 +482,7 @@ function jt(r) {
       return "<unknown>";
   }
 }
-class j extends ye {
+class j extends xe {
   get debugName() {
     return this._debugNameData.getDebugName(this) ?? "(anonymous)";
   }
@@ -492,7 +492,7 @@ class j extends ye {
   }
   onLastObserverRemoved() {
     var e, t;
-    this._state = 0, this._value = void 0, (e = b()) == null || e.handleDerivedCleared(this);
+    this._state = 0, this._value = void 0, (e = C()) == null || e.handleDerivedCleared(this);
     for (const n of this._dependencies)
       n.removeObserver(this);
     this._dependencies.clear(), this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._delayedStore !== void 0 && (this._delayedStore.dispose(), this._delayedStore = void 0), (t = this._handleLastObserverRemoved) == null || t.call(this);
@@ -532,17 +532,17 @@ class j extends ye {
       this._isReaderValid = !0, this._changeTracker && (this._isInBeforeUpdate = !0, (s = (n = this._changeTracker).beforeUpdate) == null || s.call(n, this, d), this._isInBeforeUpdate = !1, this._changeSummary = (o = this._changeTracker) == null ? void 0 : o.createChangeSummary(d));
       const c = this._state !== 0, h = this._value;
       this._state = 3;
-      const g = this._delayedStore;
-      g !== void 0 && (this._delayedStore = void 0);
+      const m = this._delayedStore;
+      m !== void 0 && (this._delayedStore = void 0);
       try {
         this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._value = this._computeFn(this, d);
       } finally {
         this._isReaderValid = !1;
-        for (const _ of this._dependenciesToBeRemoved)
-          _.removeObserver(this);
-        this._dependenciesToBeRemoved.clear(), g !== void 0 && g.dispose();
+        for (const v of this._dependenciesToBeRemoved)
+          v.removeObserver(this);
+        this._dependenciesToBeRemoved.clear(), m !== void 0 && m.dispose();
       }
-      e = this._didReportChange || c && !this._equalityComparator(h, this._value), (i = b()) == null || i.handleObservableUpdated(this, {
+      e = this._didReportChange || c && !this._equalityComparator(h, this._value), (i = C()) == null || i.handleObservableUpdated(this, {
         oldValue: h,
         newValue: this._value,
         change: void 0,
@@ -550,7 +550,7 @@ class j extends ye {
         hadValue: c
       });
     } catch (d) {
-      te(d);
+      re(d);
     }
     if (this._isComputing = !1, !this._didReportChange && e)
       for (const d of this._observers)
@@ -601,7 +601,7 @@ class j extends ye {
   handleChange(e, t) {
     var n;
     if (this._dependencies.has(e) && !this._dependenciesToBeRemoved.has(e) || this._isInBeforeUpdate) {
-      (n = b()) == null || n.handleDerivedDependencyChanged(this, e, t);
+      (n = C()) == null || n.handleDerivedDependencyChanged(this, e, t);
       let s = !1;
       try {
         s = this._changeTracker ? this._changeTracker.handleChange({
@@ -610,7 +610,7 @@ class j extends ye {
           didChange: (i) => i === e
         }, this._changeSummary) : !0;
       } catch (i) {
-        te(i);
+        re(i);
       }
       const o = this._state === 3;
       if (s && (this._state === 1 || o) && (this._state = 2, o))
@@ -670,18 +670,18 @@ class j extends ye {
       o.handleChange(this, n);
   }
 }
-function N(r, e, t = D.ofCaller()) {
-  return e !== void 0 ? new j(new M(r, void 0, e), e, void 0, void 0, X, t) : new j(new M(void 0, void 0, r), r, void 0, void 0, X, t);
+function D(r, e, t = F.ofCaller()) {
+  return e !== void 0 ? new j(new E(r, void 0, e), e, void 0, void 0, X, t) : new j(new E(void 0, void 0, r), r, void 0, void 0, X, t);
 }
-function Ut(r, e, t = D.ofCaller()) {
-  return new j(new M(r.owner, r.debugName, r.debugReferenceFn), e, void 0, r.onLastObserverRemoved, r.equalsFn ?? X, t);
+function Ut(r, e, t = F.ofCaller()) {
+  return new j(new E(r.owner, r.debugName, r.debugReferenceFn), e, void 0, r.onLastObserverRemoved, r.equalsFn ?? X, t);
 }
 Bt(Ut);
-function Pt(r, e, t = D.ofCaller()) {
+function Pt(r, e, t = F.ofCaller()) {
   let n, s;
   n = r, s = void 0;
   let o;
-  return new j(new M(s, void 0, n), (i) => {
+  return new j(new E(s, void 0, n), (i) => {
     o ? o.clear() : o = new Y();
     const d = n(i);
     return d && o.add(d), d;
@@ -701,13 +701,13 @@ function Wt(r) {
       return "<unknown>";
   }
 }
-class Xe {
+class Ye {
   get debugName() {
     return this._debugNameData.getDebugName(this) ?? "(anonymous)";
   }
   constructor(e, t, n, s) {
     var o, i;
-    this._debugNameData = e, this._runFn = t, this._changeTracker = n, this._state = 2, this._updateCount = 0, this._disposed = !1, this._dependencies = /* @__PURE__ */ new Set(), this._dependenciesToBeRemoved = /* @__PURE__ */ new Set(), this._isRunning = !1, this._store = void 0, this._delayedStore = void 0, this._changeSummary = (o = this._changeTracker) == null ? void 0 : o.createChangeSummary(void 0), (i = b()) == null || i.handleAutorunCreated(this, s), this._run();
+    this._debugNameData = e, this._runFn = t, this._changeTracker = n, this._state = 2, this._updateCount = 0, this._disposed = !1, this._dependencies = /* @__PURE__ */ new Set(), this._dependenciesToBeRemoved = /* @__PURE__ */ new Set(), this._isRunning = !1, this._store = void 0, this._delayedStore = void 0, this._changeSummary = (o = this._changeTracker) == null ? void 0 : o.createChangeSummary(void 0), (i = C()) == null || i.handleAutorunCreated(this, s), this._run();
   }
   dispose() {
     var e;
@@ -715,7 +715,7 @@ class Xe {
       this._disposed = !0;
       for (const t of this._dependencies)
         t.removeObserver(this);
-      this._dependencies.clear(), this._store !== void 0 && this._store.dispose(), this._delayedStore !== void 0 && this._delayedStore.dispose(), (e = b()) == null || e.handleAutorunDisposed(this);
+      this._dependencies.clear(), this._store !== void 0 && this._store.dispose(), this._delayedStore !== void 0 && this._delayedStore.dispose(), (e = C()) == null || e.handleAutorunDisposed(this);
     }
   }
   _run() {
@@ -724,19 +724,19 @@ class Xe {
     this._dependenciesToBeRemoved = this._dependencies, this._dependencies = e, this._state = 3;
     try {
       if (!this._disposed) {
-        (t = b()) == null || t.handleAutorunStarted(this);
+        (t = C()) == null || t.handleAutorunStarted(this);
         const i = this._changeSummary, d = this._delayedStore;
         d !== void 0 && (this._delayedStore = void 0);
         try {
           this._isRunning = !0, this._changeTracker && ((s = (n = this._changeTracker).beforeUpdate) == null || s.call(n, this, i), this._changeSummary = this._changeTracker.createChangeSummary(i)), this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._runFn(this, i);
         } catch (c) {
-          te(c);
+          re(c);
         } finally {
           this._isRunning = !1, d !== void 0 && d.dispose();
         }
       }
     } finally {
-      this._disposed || (o = b()) == null || o.handleAutorunFinished(this);
+      this._disposed || (o = C()) == null || o.handleAutorunFinished(this);
       for (const i of this._dependenciesToBeRemoved)
         i.removeObserver(this);
       this._dependenciesToBeRemoved.clear();
@@ -771,7 +771,7 @@ class Xe {
   handleChange(e, t) {
     var n;
     if (this._isDependency(e)) {
-      (n = b()) == null || n.handleAutorunDependencyChanged(this, e, t);
+      (n = C()) == null || n.handleAutorunDependencyChanged(this, e, t);
       try {
         (this._changeTracker ? this._changeTracker.handleChange({
           changedObservable: e,
@@ -779,7 +779,7 @@ class Xe {
           didChange: (o) => o === e
         }, this._changeSummary) : !0) && (this._state = 2);
       } catch (s) {
-        te(s);
+        re(s);
       }
     }
   }
@@ -821,15 +821,15 @@ class Xe {
     this._isRunning ? this._state = 2 : this._run();
   }
 }
-function Ye(r, e = D.ofCaller()) {
-  return new Xe(new M(void 0, void 0, r), r, void 0, e);
+function Qe(r, e = F.ofCaller()) {
+  return new Ye(new E(void 0, void 0, r), r, void 0, e);
 }
-function Me(r) {
+function Fe(r) {
   const e = new Error("BugIndicatingErrorRecovery: " + r);
   Ht(e), console.error("recovered from an error that indicates a bug", e);
 }
-function Qe(r, e) {
-  const t = new et(r, e);
+function et(r, e) {
+  const t = new tt(r, e);
   try {
     r(t);
   } finally {
@@ -837,19 +837,19 @@ function Qe(r, e) {
   }
 }
 function Gt(r, e, t) {
-  r ? e(r) : Qe(e, t);
+  r ? e(r) : et(e, t);
 }
-class et {
+class tt {
   constructor(e, t) {
     var n;
-    this._fn = e, this._getDebugName = t, this._updatingObservers = [], (n = b()) == null || n.handleBeginTransaction(this);
+    this._fn = e, this._getDebugName = t, this._updatingObservers = [], (n = C()) == null || n.handleBeginTransaction(this);
   }
   getDebugName() {
-    return this._getDebugName ? this._getDebugName() : be(this._fn);
+    return this._getDebugName ? this._getDebugName() : ye(this._fn);
   }
   updateObserver(e, t) {
     if (!this._updatingObservers) {
-      Me("Transaction already finished!"), Qe((n) => {
+      Fe("Transaction already finished!"), et((n) => {
         n.updateObserver(e, t);
       });
       return;
@@ -860,30 +860,30 @@ class et {
     var t;
     const e = this._updatingObservers;
     if (!e) {
-      Me("transaction.finish() has already been called!");
+      Fe("transaction.finish() has already been called!");
       return;
     }
     for (let n = 0; n < e.length; n++) {
       const { observer: s, observable: o } = e[n];
       s.endUpdate(o);
     }
-    this._updatingObservers = null, (t = b()) == null || t.handleEndTransaction(this);
+    this._updatingObservers = null, (t = C()) == null || t.handleEndTransaction(this);
   }
   debugGetUpdatingObservers() {
     return this._updatingObservers;
   }
 }
-function x(r, e, t = D.ofCaller()) {
+function w(r, e, t = F.ofCaller()) {
   let n;
-  return typeof r == "string" ? n = new M(void 0, r, void 0) : n = new M(r, void 0, void 0), new tt(n, e, X, t);
+  return typeof r == "string" ? n = new E(void 0, r, void 0) : n = new E(r, void 0, void 0), new rt(n, e, X, t);
 }
-class tt extends ye {
+class rt extends xe {
   get debugName() {
     return this._debugNameData.getDebugName(this) ?? "ObservableValue";
   }
   constructor(e, t, n, s) {
     var o;
-    super(s), this._debugNameData = e, this._equalityComparator = n, this._value = t, (o = b()) == null || o.handleObservableUpdated(this, { hadValue: !1, newValue: t, change: void 0, didChange: !0, oldValue: void 0 });
+    super(s), this._debugNameData = e, this._equalityComparator = n, this._value = t, (o = C()) == null || o.handleObservableUpdated(this, { hadValue: !1, newValue: t, change: void 0, didChange: !0, oldValue: void 0 });
   }
   get() {
     return this._value;
@@ -893,11 +893,11 @@ class tt extends ye {
     if (n === void 0 && this._equalityComparator(this._value, e))
       return;
     let s;
-    t || (t = s = new et(() => {
+    t || (t = s = new tt(() => {
     }, () => `Setting ${this.debugName}`));
     try {
       const i = this._value;
-      this._setValue(e), (o = b()) == null || o.handleObservableUpdated(this, { oldValue: i, newValue: e, change: n, didChange: !0, hadValue: !0 });
+      this._setValue(e), (o = C()) == null || o.handleObservableUpdated(this, { oldValue: i, newValue: e, change: n, didChange: !0, hadValue: !0 });
       for (const d of this._observers)
         t.updateObserver(d, this), d.handleChange(this, n);
     } finally {
@@ -919,25 +919,25 @@ class tt extends ye {
     this._value = e;
   }
 }
-function Fe(...r) {
+function Ee(...r) {
   let e, t, n, s;
-  return r.length === 2 ? [t, n] = r : [e, t, n, s] = r, new L(new M(e, void 0, n), t, n, () => L.globalTransaction, X, s ?? D.ofCaller());
+  return r.length === 2 ? [t, n] = r : [e, t, n, s] = r, new L(new E(e, void 0, n), t, n, () => L.globalTransaction, X, s ?? F.ofCaller());
 }
-class L extends ye {
+class L extends xe {
   constructor(e, t, n, s, o, i) {
     super(i), this._debugNameData = e, this.event = t, this._getValue = n, this._getTransaction = s, this._equalityComparator = o, this._hasValue = !1, this.handleEvent = (d) => {
-      var C;
-      const c = this._getValue(d), h = this._value, g = !this._hasValue || !this._equalityComparator(h, c);
-      let _ = !1;
-      g && (this._value = c, this._hasValue && (_ = !0, Gt(this._getTransaction(), (m) => {
-        var v;
-        (v = b()) == null || v.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: g, hadValue: this._hasValue });
-        for (const O of this._observers)
-          m.updateObserver(O, this), O.handleChange(this, void 0);
+      var R;
+      const c = this._getValue(d), h = this._value, m = !this._hasValue || !this._equalityComparator(h, c);
+      let v = !1;
+      m && (this._value = c, this._hasValue && (v = !0, Gt(this._getTransaction(), (g) => {
+        var _;
+        (_ = C()) == null || _.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: m, hadValue: this._hasValue });
+        for (const b of this._observers)
+          g.updateObserver(b, this), b.handleChange(this, void 0);
       }, () => {
-        const m = this.getDebugName();
-        return "Event fired" + (m ? `: ${m}` : "");
-      })), this._hasValue = !0), _ || (C = b()) == null || C.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: g, hadValue: this._hasValue });
+        const g = this.getDebugName();
+        return "Event fired" + (g ? `: ${g}` : "");
+      })), this._hasValue = !0), v || (R = C()) == null || R.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: m, hadValue: this._hasValue });
     };
   }
   getDebugName() {
@@ -975,28 +975,28 @@ class L extends ye {
     }
   }
   r.batchEventsGlobally = e;
-})(Fe || (Fe = {}));
+})(Ee || (Ee = {}));
 function qt(r) {
-  const e = new rt(!1, void 0);
-  return r.addObserver(e), Ze(() => {
+  const e = new nt(!1, void 0);
+  return r.addObserver(e), Xe(() => {
     r.removeObserver(e);
   });
 }
 zt(qt);
 function Kt(r, e) {
-  const t = new rt(!0, e);
+  const t = new nt(!0, e);
   r.addObserver(t);
   try {
     t.beginUpdate(r);
   } finally {
     t.endUpdate(r);
   }
-  return Ze(() => {
+  return Xe(() => {
     r.removeObserver(t);
   });
 }
 At(Kt);
-class rt {
+class nt {
   constructor(e, t) {
     this._forceRecompute = e, this._handleValue = t, this._counter = 0;
   }
@@ -1011,9 +1011,9 @@ class rt {
   handleChange(e, t) {
   }
 }
-let ee;
+let te;
 function Jt(r) {
-  ee || (ee = new Zt(), Ot(ee)), ee.addFilteredObj(r);
+  te || (te = new Zt(), Ot(te)), te.addFilteredObj(r);
 }
 class Zt {
   constructor() {
@@ -1035,17 +1035,17 @@ class Zt {
   formatInfo(e) {
     return e.hadValue ? e.didChange ? [
       U(" "),
-      R(Z(e.oldValue, 70), {
+      I(Z(e.oldValue, 70), {
         color: "red",
         strikeThrough: !0
       }),
       U(" "),
-      R(Z(e.newValue, 60), {
+      I(Z(e.newValue, 60), {
         color: "green"
       })
     ] : [U(" (unchanged)")] : [
       U(" "),
-      R(Z(e.newValue, 60), {
+      I(Z(e.newValue, 60), {
         color: "green"
       }),
       U(" (initial)")
@@ -1067,14 +1067,14 @@ class Zt {
       }
       console.log(...this.textToConsoleArgs([
         P("observable value changed"),
-        R(e.debugName, { color: "BlueViolet" }),
+        I(e.debugName, { color: "BlueViolet" }),
         ...this.formatInfo(t)
       ]));
     }
   }
   formatChanges(e) {
     if (e.size !== 0)
-      return R(" (changed deps: " + [...e].map((t) => t.debugName).join(", ") + ")", { color: "gray" });
+      return I(" (changed deps: " + [...e].map((t) => t.debugName).join(", ") + ")", { color: "gray" });
   }
   handleDerivedDependencyChanged(e, t, n) {
     var s;
@@ -1086,7 +1086,7 @@ class Zt {
     const n = this.changedObservablesSets.get(e);
     n && (console.log(...this.textToConsoleArgs([
       P("derived recomputed"),
-      R(e.debugName, { color: "BlueViolet" }),
+      I(e.debugName, { color: "BlueViolet" }),
       ...this.formatInfo(t),
       this.formatChanges(n),
       { data: [{ fn: e._debugNameData.referenceFn ?? e._computeFn }] }
@@ -1095,13 +1095,13 @@ class Zt {
   handleDerivedCleared(e) {
     this._isIncluded(e) && console.log(...this.textToConsoleArgs([
       P("derived cleared"),
-      R(e.debugName, { color: "BlueViolet" })
+      I(e.debugName, { color: "BlueViolet" })
     ]));
   }
   handleFromEventObservableTriggered(e, t) {
     this._isIncluded(e) && console.log(...this.textToConsoleArgs([
       P("observable from event triggered"),
-      R(e.debugName, { color: "BlueViolet" }),
+      I(e.debugName, { color: "BlueViolet" }),
       ...this.formatInfo(t),
       { data: [{ fn: e._getValue }] }
     ]));
@@ -1118,7 +1118,7 @@ class Zt {
     const t = this.changedObservablesSets.get(e);
     t && (this._isIncluded(e) && console.log(...this.textToConsoleArgs([
       P("autorun"),
-      R(e.debugName, { color: "BlueViolet" }),
+      I(e.debugName, { color: "BlueViolet" }),
       this.formatChanges(t),
       { data: [{ fn: e._debugNameData.referenceFn ?? e._runFn }] }
     ])), t.clear(), this.indentation++);
@@ -1130,7 +1130,7 @@ class Zt {
     let t = e.getDebugName();
     t === void 0 && (t = ""), this._isIncluded(e) && console.log(...this.textToConsoleArgs([
       P("transaction"),
-      R(t, { color: "BlueViolet" }),
+      I(t, { color: "BlueViolet" }),
       { data: [{ fn: e._fn }] }
     ])), this.indentation++;
   }
@@ -1152,12 +1152,12 @@ function Xt(r) {
   return o.push(...t), o;
 }
 function U(r) {
-  return R(r, { color: "black" });
+  return I(r, { color: "black" });
 }
 function P(r) {
-  return R(rr(`${r}: `, 10), { color: "black", bold: !0 });
+  return I(rr(`${r}: `, 10), { color: "black", bold: !0 });
 }
-function R(r, e = {
+function I(r, e = {
   color: "black"
 }) {
   function t(s) {
@@ -1218,7 +1218,7 @@ function er(r, e) {
   } catch {
     return "[[Object]]";
   }
-  const t = Ge(r);
+  const t = qe(r);
   let n = t ? t + "(" : "{ ", s = !0, o;
   try {
     o = Object.entries(r);
@@ -1246,10 +1246,10 @@ function rr(r, e) {
   return r;
 }
 function nr(r, e) {
-  const t = (e == null ? void 0 : e.debugNamePostProcessor) ?? ((o) => o), n = T.from(r, t);
-  return n ? nt(n, 0, /* @__PURE__ */ new Set()).trim() : "";
+  const t = (e == null ? void 0 : e.debugNamePostProcessor) ?? ((o) => o), n = k.from(r, t);
+  return n ? st(n, 0, /* @__PURE__ */ new Set()).trim() : "";
 }
-function nt(r, e, t) {
+function st(r, e, t) {
   const n = "		".repeat(e), s = [];
   if (t.has(r.sourceObj))
     return s.push(`${n}* ${r.type} ${r.name} (already listed)`), s.join(`
@@ -1257,29 +1257,29 @@ function nt(r, e, t) {
   if (t.add(r.sourceObj), s.push(`${n}* ${r.type} ${r.name}:`), s.push(`${n}  value: ${Z(r.value, 50)}`), s.push(`${n}  state: ${r.state}`), r.dependencies.length > 0) {
     s.push(`${n}  dependencies:`);
     for (const i of r.dependencies)
-      s.push(nt(i, e + 1, t));
+      s.push(st(i, e + 1, t));
   }
   return s.join(`
 `);
 }
-class T {
+class k {
   static from(e, t) {
-    if (e instanceof Xe) {
+    if (e instanceof Ye) {
       const n = e.debugGetState();
-      return new T(e, t(e.debugName), "autorun", void 0, n.stateStr, Array.from(n.dependencies).map((s) => T.from(s, t) || T.unknown(s)));
+      return new k(e, t(e.debugName), "autorun", void 0, n.stateStr, Array.from(n.dependencies).map((s) => k.from(s, t) || k.unknown(s)));
     } else if (e instanceof j) {
       const n = e.debugGetState();
-      return new T(e, t(e.debugName), "derived", n.value, n.stateStr, Array.from(n.dependencies).map((s) => T.from(s, t) || T.unknown(s)));
-    } else if (e instanceof tt) {
+      return new k(e, t(e.debugName), "derived", n.value, n.stateStr, Array.from(n.dependencies).map((s) => k.from(s, t) || k.unknown(s)));
+    } else if (e instanceof rt) {
       const n = e.debugGetState();
-      return new T(e, t(e.debugName), "observableValue", n.value, "upToDate", []);
+      return new k(e, t(e.debugName), "observableValue", n.value, "upToDate", []);
     } else if (e instanceof L) {
       const n = e.debugGetState();
-      return new T(e, t(e.debugName), "fromEvent", n.value, n.hasValue ? "upToDate" : "initial", []);
+      return new k(e, t(e.debugName), "fromEvent", n.value, n.hasValue ? "upToDate" : "initial", []);
     }
   }
   static unknown(e) {
-    return new T(e, "(unknown)", "unknown", void 0, "unknown", []);
+    return new k(e, "(unknown)", "unknown", void 0, "unknown", []);
   }
   constructor(e, t, n, s, o, i) {
     this.sourceObj = e, this.name = t, this.type = n, this.value = s, this.state = o, this.dependencies = i;
@@ -1289,11 +1289,11 @@ $t(nr);
 kt(Jt);
 class sr {
   constructor() {
-    l(this, "_fixtures", x(this, /* @__PURE__ */ new Map()));
+    l(this, "_fixtures", w(this, /* @__PURE__ */ new Map()));
     /** Observable root of the fixture tree */
-    l(this, "root", N(this, (e) => {
+    l(this, "root", D(this, (e) => {
       const t = this._fixtures.read(e);
-      return oe(t);
+      return ie(t);
     }));
   }
   /**
@@ -1324,14 +1324,14 @@ class sr {
    */
   getNode(e, t) {
     const n = this.root.read(e);
-    return Oe(n, t);
+    return ke(n, t);
   }
   /**
    * Gets a component by path (non-reactive, for use in preview iframe).
    * @param path Array of path segments (e.g., ['Button', 'Primary'])
    */
   getComponentByPath(e) {
-    const t = this._fixtures.get(), n = oe(t), s = Oe(n, e);
+    const t = this._fixtures.get(), n = ie(t), s = ke(n, e);
     return s == null ? void 0 : s.component;
   }
 }
@@ -1362,47 +1362,58 @@ class kn {
     return this._flattenFixtures(this._root);
   }
   async renderFixture(e) {
-    var C;
+    var R;
     const t = this._findFixtureNode(this._root, e);
     if (!t || !t.component)
       throw new Error("Fixture not found: " + e);
-    (C = this._currentDisposable) != null && C.dispose && this._currentDisposable.dispose(), this._currentDisposable = void 0, this._currentContainer && (this._currentContainer.remove(), this._currentContainer = void 0);
+    (R = this._currentDisposable) != null && R.dispose && this._currentDisposable.dispose(), this._currentDisposable = void 0, this._currentContainer && (this._currentContainer.remove(), this._currentContainer = void 0);
     const n = document.createElement("div");
     n.style.display = "inline-block", this._containerElement.appendChild(n), this._currentContainer = n;
     const s = t.component, o = Rt(s.properties);
     let i = n;
     if (s.isolation === "shadow-dom") {
-      const m = n.attachShadow({ mode: "open" });
-      i = document.createElement("div"), m.appendChild(i);
+      const g = n.attachShadow({ mode: "open" });
+      i = document.createElement("div"), g.appendChild(i);
     }
     const d = [], c = console.error, h = console.warn;
-    console.error = (...m) => {
-      d.push({ kind: "console", level: "error", message: m.map(String).join(" ") }), c.apply(console, m);
-    }, console.warn = (...m) => {
-      d.push({ kind: "console", level: "warn", message: m.map(String).join(" ") }), h.apply(console, m);
+    console.error = (...g) => {
+      d.push({ kind: "console", level: "error", message: g.map(String).join(" ") }), c.apply(console, g);
+    }, console.warn = (...g) => {
+      d.push({ kind: "console", level: "warn", message: g.map(String).join(" ") }), h.apply(console, g);
     };
-    const g = (m) => {
-      var v;
-      d.push({ kind: "exception", message: m.message, stack: (v = m.error) == null ? void 0 : v.stack });
-    }, _ = (m) => {
-      const v = m.reason, O = v instanceof Error ? v.message : String(v), S = v instanceof Error ? v.stack : void 0;
-      d.push({ kind: "exception", message: O, stack: S });
+    const m = (g) => {
+      var _;
+      d.push({ kind: "exception", message: g.message, stack: (_ = g.error) == null ? void 0 : _.stack });
+    }, v = (g) => {
+      const _ = g.reason, b = _ instanceof Error ? _.message : String(_), y = _ instanceof Error ? _.stack : void 0;
+      d.push({ kind: "exception", message: b, stack: y });
     };
-    window.addEventListener("error", g), window.addEventListener("unhandledrejection", _);
+    window.addEventListener("error", m), window.addEventListener("unhandledrejection", v);
     try {
-      const m = new AbortController();
-      let v = s.render(i, {
+      const g = new AbortController(), _ = 3e3;
+      let b = s.render(i, {
         props: o,
-        signal: m.signal
+        signal: g.signal
       });
-      v instanceof Promise && (v = await v), this._currentDisposable = v ?? void 0, v != null && v.ready && await v.ready;
-    } catch (m) {
-      const v = m instanceof Error ? m : new Error(String(m));
-      d.push({ kind: "exception", message: v.message, stack: v.stack });
+      if (b instanceof Promise) {
+        const y = new Promise((x) => setTimeout(() => x("timeout"), _)), O = await Promise.race([b.then((x) => ({ resolved: x })), y]);
+        O === "timeout" ? (g.abort(), d.push({ kind: "exception", message: `Fixture render() timed out after ${_}ms` }), b.then((x) => {
+          var ee;
+          return (ee = x == null ? void 0 : x.dispose) == null ? void 0 : ee.call(x);
+        }).catch(() => {
+        }), b = void 0) : b = O.resolved;
+      }
+      if (this._currentDisposable = b ?? void 0, b != null && b.ready) {
+        const y = new Promise((x) => setTimeout(() => x("timeout"), _));
+        await Promise.race([b.ready.then(() => "done"), y]) === "timeout" && (g.abort(), d.push({ kind: "exception", message: `Fixture ready promise timed out after ${_}ms` }));
+      }
+    } catch (g) {
+      const _ = g instanceof Error ? g : new Error(String(g));
+      d.push({ kind: "exception", message: _.message, stack: _.stack });
     } finally {
       console.error = c, console.warn = h;
     }
-    return await new Promise((m) => requestAnimationFrame(() => requestAnimationFrame(() => m()))), window.removeEventListener("error", g), window.removeEventListener("unhandledrejection", _), { errors: d };
+    return await new Promise((g) => requestAnimationFrame(() => requestAnimationFrame(() => g()))), window.removeEventListener("error", m), window.removeEventListener("unhandledrejection", v), { errors: d };
   }
   _buildRegistry() {
     const e = /* @__PURE__ */ new Map();
@@ -1410,7 +1421,7 @@ class kn {
       const s = n.default;
       s && typeof s == "object" && e.set(t, s);
     }
-    return oe(e);
+    return ie(e);
   }
   _flattenFixtures(e, t = []) {
     var s;
@@ -1469,47 +1480,47 @@ class or {
   }
 }
 function u() {
-  return ce.instance;
+  return le.instance;
 }
 function ir() {
-  return le.instance;
+  return he.instance;
 }
 function ar() {
-  return he.instance;
+  return ue.instance;
 }
 u.const = ir;
 u.obs = ar;
-class ce {
+class le {
   create(e) {
-    const t = N((n) => e(n));
+    const t = D((n) => e(n));
     return { read: (n) => t };
   }
 }
-ce.instance = new ce();
-class le {
+le.instance = new le();
+class he {
   create(e) {
-    const t = N((n) => e(n));
+    const t = D((n) => e(n));
     return { read: (n) => t.read(n) };
   }
 }
-le.instance = new le();
-class he {
+he.instance = new he();
+class ue {
   create(e) {
-    const t = N((n) => {
+    const t = D((n) => {
       const s = e(n);
       return dr(s) ? s.read(n) : s;
     });
     return { read: (n) => t };
   }
 }
-he.instance = new he();
+ue.instance = new ue();
 function dr(r) {
   return typeof r == "object" && r !== null && "read" in r;
 }
 function K(r, e) {
   return Object.fromEntries(Object.entries(r).map(([t, n]) => [t, e(n, t)]));
 }
-const ne = Symbol("ViewModelContext");
+const se = Symbol("ViewModelContext");
 class cr {
   constructor(e) {
     this._store = new Y(), this.props = e;
@@ -1519,34 +1530,34 @@ class cr {
   }
 }
 function lr(r) {
-  return r[ne] || (r[ne] = Ue(void 0)), r[ne];
+  return r[se] || (r[se] = Pe(void 0)), r[se];
 }
-function F(r = {}) {
+function B(r = {}) {
   var e;
   return e = class extends cr {
   }, e._props = r, e;
 }
-let ue = 0;
+let pe = 0;
 const hr = new or((r) => {
   for (const e of r)
     e.rendered = !1;
-  if (ue > 0) {
+  if (pe > 0) {
     const e = r.find((t) => t.isRendering);
     e.itemsToRender = r;
   } else
-    Pe(() => {
+    We(() => {
       for (const e of r)
         e.rendered || e.forceUpdate();
     });
 });
 let ur = 0;
-class fr {
+class pr {
   constructor(e, t) {
     this.debugName = e, this.renderFactory = t, this._obsProps = void 0, this.forceUpdate = void 0, this._render = void 0, this._disposable = void 0, this.contextValues = /* @__PURE__ */ new Map(), this.cleanupEffect = () => () => {
       var n;
       (n = this._disposable) == null || n.dispose();
     }, this.itemsToRender = [], this.handleAfterRender = () => {
-      Pe(() => {
+      We(() => {
         for (const n of this.itemsToRender)
           n.rendered || n.forceUpdate();
       }), this.itemsToRender = [];
@@ -1556,30 +1567,30 @@ class fr {
     return this.debugName;
   }
   updateProps(e) {
-    this._obsProps ? this._obsProps.set(e, void 0) : (this._obsProps = x(this, e), this._render = this.renderFactory(this._obsProps, () => this.contextValues), this.rendering = N(this, this._render), this._disposable = hr.addDependency(this.rendering, this));
+    this._obsProps ? this._obsProps.set(e, void 0) : (this._obsProps = w(this, e), this._render = this.renderFactory(this._obsProps, () => this.contextValues), this.rendering = D(this, this._render), this._disposable = hr.addDependency(this.rendering, this));
   }
 }
-function xe(r, e, t) {
-  const n = (i) => i + 1, s = () => new fr(r + ++ur, e), o = function(i) {
+function Ce(r, e, t) {
+  const n = (i) => i + 1, s = () => new pr(r + ++ur, e), o = function(i) {
     const d = bt(n, 0)[1], c = yt(s)[0];
     for (const h of t ?? [])
       c.contextValues.set(h, xt(h));
-    if (Te(c.cleanupEffect, []), Te(c.handleAfterRender), c.isRendering)
+    if (Ie(c.cleanupEffect, []), Ie(c.handleAfterRender), c.isRendering)
       throw new Error("Component is already rendering");
-    c.isRendering = !0, ue++;
+    c.isRendering = !0, pe++;
     try {
       c.forceUpdate = d, c.updateProps(i);
       const h = c.rendering.get();
       return c.rendered = !0, h;
     } finally {
-      c.isRendering = !1, ue--;
+      c.isRendering = !1, pe--;
     }
   };
   return o.displayName = r, o;
 }
-xe("ObsView", (r) => (e) => r.read(e).children(e));
-function I(r, e) {
-  return xe("view", (t) => {
+Ce("ObsView", (r) => (e) => r.read(e).children(e));
+function V(r, e) {
+  return Ce("view", (t) => {
     const n = K(r, (s, o) => s.create((i) => t.read(i)[o], void 0));
     return (s) => {
       const o = K(n, (i) => i.read(s));
@@ -1587,7 +1598,7 @@ function I(r, e) {
     };
   });
 }
-function pr(r) {
+function fr(r) {
   const e = [];
   for (const t of Object.values(r)) {
     const n = t._requiredContext;
@@ -1595,29 +1606,29 @@ function pr(r) {
   }
   return e;
 }
-function E(r, e, t) {
-  const n = typeof e == "function" ? {} : e, s = typeof e == "function" ? e : t, o = "_props" in r ? r._props : {}, i = pr({ ...o, ...n }), d = lr(r), c = [...i, d];
-  return xe("viewWithModel", (h, g) => {
-    const _ = g(), C = _.get(d), m = "_props" in r ? K(r._props, (S, B) => S.create((A) => h.read(A)[B], _.get(S._requiredContext))) : {}, v = C ? { read: () => C, dispose: () => {
-    } } : Pt((S) => {
-      const B = K(m, (A) => A.read(S));
-      return new r(B);
-    }), O = K(n, (S, B) => S.create((A) => h.read(A)[B], _.get(S._requiredContext)));
-    return (S) => {
-      const B = v.read(S), A = K(O, (gt) => gt.read(S));
-      return s(S, B, A);
+function A(r, e, t) {
+  const n = typeof e == "function" ? {} : e, s = typeof e == "function" ? e : t, o = "_props" in r ? r._props : {}, i = fr({ ...o, ...n }), d = lr(r), c = [...i, d];
+  return Ce("viewWithModel", (h, m) => {
+    const v = m(), R = v.get(d), g = "_props" in r ? K(r._props, (y, O) => y.create((x) => h.read(x)[O], v.get(y._requiredContext))) : {}, _ = R ? { read: () => R, dispose: () => {
+    } } : Pt((y) => {
+      const O = K(g, (x) => x.read(y));
+      return new r(O);
+    }), b = K(n, (y, O) => y.create((x) => h.read(x)[O], v.get(y._requiredContext)));
+    return (y) => {
+      const O = _.read(y), x = K(b, (ee) => ee.read(y));
+      return s(y, O, x);
     };
   }, c.length > 0 ? c : void 0);
 }
-I({ value: u.obs() }, (r, e) => e.value.read(r));
-Ue(null);
-function st(r) {
+V({ value: u.obs() }, (r, e) => e.value.read(r));
+Pe(null);
+function ot(r) {
   var e;
   return {
     id: r.id,
     name: r.name,
     type: r.type,
-    children: (e = r.children) == null ? void 0 : e.map(st),
+    children: (e = r.children) == null ? void 0 : e.map(ot),
     component: r.component
   };
 }
@@ -1634,16 +1645,16 @@ function Q(r, e) {
     h !== null && (i = o(h));
   } catch {
   }
-  const d = x(r, i), c = d.set.bind(d);
-  return d.set = (h, g) => {
+  const d = w(r, i), c = d.set.bind(d);
+  return d.set = (h, m) => {
     try {
       localStorage.setItem(t, s(h));
     } catch {
     }
-    c(h, g);
+    c(h, m);
   }, d;
 }
-class gr extends F({
+class gr extends B({
   registry: u.const(),
   daemonModel: u.const(),
   reportModel: u.const()
@@ -1666,27 +1677,27 @@ class gr extends F({
       storageKey: "component-explorer:selectedNodeId",
       defaultValue: void 0
     }));
-    l(this, "expandedNodeIds", x(this, /* @__PURE__ */ new Set([""])));
+    l(this, "expandedNodeIds", w(this, /* @__PURE__ */ new Set([""])));
     l(this, "viewMode", Q(this, {
       storageKey: "component-explorer:viewMode",
       defaultValue: "session"
     }));
     /** The explorer's tree derived from the registry or report */
-    l(this, "tree", N(this, (t) => {
+    l(this, "tree", D(this, (t) => {
       const n = this.props.reportModel;
       if (n)
         return n.buildTree(t);
       const s = this.props.registry.root.read(t);
-      return st(s);
+      return ot(s);
     }));
-    l(this, "selectedNode", N(this, (t) => {
+    l(this, "selectedNode", D(this, (t) => {
       const n = this.selectedNodeId.read(t);
       if (n === void 0) return;
       const s = this.tree.read(t);
       return s.id === n ? s : this._findNode(s.children ?? [], n);
     }));
     /** List of preview rows to render based on current selection and view mode */
-    l(this, "selectedFixtures", N(this, (t) => {
+    l(this, "selectedFixtures", D(this, (t) => {
       const n = this.selectedNode.read(t);
       return n ? this.isReportMode ? (this.props.reportModel.state.read(t), this._collectReportRows(n, n.name)) : this.viewMode.read(t) === "diff" && this.daemonAvailable && this.daemon.sessions.read(t).length > 1 ? this._collectDiffRows(n, n.name) : this._collectPreviewRows(n, n.name) : [];
     }));
@@ -1842,7 +1853,7 @@ class gr extends F({
     return i;
   }
 }
-const p = {
+const f = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -2031,15 +2042,15 @@ const p = {
     cursor: "pointer"
   }
 };
-function Ce(...r) {
+function Se(...r) {
   return Object.assign({}, ...r.filter(Boolean));
 }
-class mr extends F({
+class mr extends B({
   active: u()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "isHovered", x(this, !1));
+    l(this, "isHovered", w(this, !1));
     l(this, "setHovered", (t) => {
       this.isHovered.set(t, void 0);
     });
@@ -2048,7 +2059,7 @@ class mr extends F({
     return this.props.active;
   }
 }
-const se = E(
+const oe = A(
   mr,
   {
     onClick: u.const(),
@@ -2056,10 +2067,10 @@ const se = E(
     children: u.const()
   },
   (r, e, t) => {
-    const n = e.isHovered.read(r), s = e.active.read(r), o = Ce(
-      p.titleBarButton,
-      n && !s && p.titleBarButtonHover,
-      s && p.titleBarButtonActive
+    const n = e.isHovered.read(r), s = e.active.read(r), o = Se(
+      f.titleBarButton,
+      n && !s && f.titleBarButtonHover,
+      s && f.titleBarButtonActive
     );
     return /* @__PURE__ */ a(
       "button",
@@ -2073,17 +2084,17 @@ const se = E(
       }
     );
   }
-), vr = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.4-5.3 5.3z" }) }), _r = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M11 5.5L6 10.5L5.3 9.8L9.6 5.5L5.3 1.2L6 0.5L11 5.5z", transform: "rotate(90 8 5.5)" }) }), br = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M14.5 2H9l-.35.15-.65.64-.65-.64L7 2H1.5l-.5.5v10l.5.5H7l.35-.15.65-.64.65.64.35.15h5.5l.5-.5v-10l-.5-.5zm-7 10H2V3h5v.86L5.85 5l1.15 1.14V10l-1.15-1.14L7 7.72V12zm6 0H8V7.72l1.15 1.14L8 10V6.14L9.15 5 8 3.86V3h5v9z" }) }), yr = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M14.5 3H7.71l-.85-.85L6.5 2h-5l-.5.5v11l.5.5h13l.5-.5v-10l-.5-.5zm-.5 10H2V6h12v7zm0-8H2V3h4.29l.85.85.36.15H14v1z" }) }), xr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm11 11H6V3h7v10zM3 3h2v10H3V3z" }) }), Cr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm6 11V3h5v10H8zM3 3h4v10H3V3z" }) }), Sr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" }) }), wr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" }) }), Rr = I(
+), vr = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.4-5.3 5.3z" }) }), _r = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M11 5.5L6 10.5L5.3 9.8L9.6 5.5L5.3 1.2L6 0.5L11 5.5z", transform: "rotate(90 8 5.5)" }) }), br = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M14.5 2H9l-.35.15-.65.64-.65-.64L7 2H1.5l-.5.5v10l.5.5H7l.35-.15.65-.64.65.64.35.15h5.5l.5-.5v-10l-.5-.5zm-7 10H2V3h5v.86L5.85 5l1.15 1.14V10l-1.15-1.14L7 7.72V12zm6 0H8V7.72l1.15 1.14L8 10V6.14L9.15 5 8 3.86V3h5v9z" }) }), yr = ({ style: r }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ a("path", { d: "M14.5 3H7.71l-.85-.85L6.5 2h-5l-.5.5v11l.5.5h13l.5-.5v-10l-.5-.5zm-.5 10H2V6h12v7zm0-8H2V3h4.29l.85.85.36.15H14v1z" }) }), xr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm11 11H6V3h7v10zM3 3h2v10H3V3z" }) }), Cr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm6 11V3h5v10H8zM3 3h4v10H3V3z" }) }), Sr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z" }) }), wr = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z" }) }), Rr = V(
   { model: u.const() },
   (r, e) => {
     var d, c;
     const t = e.model, n = t.viewMode.read(r), s = ((d = t.daemon) == null ? void 0 : d.sessions.read(r)) ?? [], o = (c = t.daemon) == null ? void 0 : c.sessionName, i = s.filter((h) => h.name !== o);
-    return s.length <= 1 ? null : /* @__PURE__ */ f("div", { style: J.container, children: [
-      /* @__PURE__ */ f("div", { style: J.segmentedControl, children: [
-        /* @__PURE__ */ a(Ee, { label: "Live", mode: "session", active: n === "session", onClick: () => t.setViewMode("session") }),
-        /* @__PURE__ */ a(Ee, { label: "Diff", mode: "diff", active: n === "diff", onClick: () => t.setViewMode("diff") })
+    return s.length <= 1 ? null : /* @__PURE__ */ p("div", { style: J.container, children: [
+      /* @__PURE__ */ p("div", { style: J.segmentedControl, children: [
+        /* @__PURE__ */ a(Be, { label: "Live", mode: "session", active: n === "session", onClick: () => t.setViewMode("session") }),
+        /* @__PURE__ */ a(Be, { label: "Diff", mode: "diff", active: n === "diff", onClick: () => t.setViewMode("diff") })
       ] }),
-      i.length > 0 && /* @__PURE__ */ a("div", { style: J.sessionLinks, children: i.map((h) => /* @__PURE__ */ f(
+      i.length > 0 && /* @__PURE__ */ a("div", { style: J.sessionLinks, children: i.map((h) => /* @__PURE__ */ p(
         "button",
         {
           style: J.sessionLink,
@@ -2099,7 +2110,7 @@ const se = E(
     ] });
   }
 );
-function Ee({ label: r, mode: e, active: t, onClick: n }) {
+function Be({ label: r, mode: e, active: t, onClick: n }) {
   return /* @__PURE__ */ a(
     "button",
     {
@@ -2109,15 +2120,15 @@ function Ee({ label: r, mode: e, active: t, onClick: n }) {
     }
   );
 }
-const Tr = I(
+const Tr = V(
   {
     model: u.const()
   },
   (r, e) => {
     const t = e.model, n = t.leftSidebarVisible.read(r), s = t.rightSidebarVisible.read(r), o = t.isDarkTheme.read(r), i = t.selectedNode.read(r);
-    return /* @__PURE__ */ f("div", { style: p.titleBar, children: [
-      /* @__PURE__ */ a("div", { style: p.titleBarSection, children: /* @__PURE__ */ a(
-        se,
+    return /* @__PURE__ */ p("div", { style: f.titleBar, children: [
+      /* @__PURE__ */ a("div", { style: f.titleBarSection, children: /* @__PURE__ */ a(
+        oe,
         {
           active: n,
           onClick: t.toggleLeftSidebar,
@@ -2125,17 +2136,17 @@ const Tr = I(
           children: /* @__PURE__ */ a(xr, {})
         }
       ) }),
-      /* @__PURE__ */ f("div", { style: p.titleBarCenter, children: [
+      /* @__PURE__ */ p("div", { style: f.titleBarCenter, children: [
         t.isReportMode ? /* @__PURE__ */ a("span", { style: { fontSize: 12, color: "var(--vscode-descriptionForeground)" }, children: "Screenshot Report" }) : t.daemonAvailable ? /* @__PURE__ */ a(Rr, { model: t }) : null,
-        i ? /* @__PURE__ */ f(pe, { children: [
+        i ? /* @__PURE__ */ p(ge, { children: [
           /* @__PURE__ */ a("span", { style: { color: "var(--vscode-textLink-foreground)" }, children: "<" }),
           /* @__PURE__ */ a("span", { children: i.name }),
           /* @__PURE__ */ a("span", { style: { color: "var(--vscode-textLink-foreground)" }, children: "/>" })
         ] }) : /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: "No component selected" })
       ] }),
-      /* @__PURE__ */ f("div", { style: p.titleBarSection, children: [
+      /* @__PURE__ */ p("div", { style: f.titleBarSection, children: [
         /* @__PURE__ */ a(
-          se,
+          oe,
           {
             active: !1,
             onClick: t.toggleTheme,
@@ -2144,7 +2155,7 @@ const Tr = I(
           }
         ),
         /* @__PURE__ */ a(
-          se,
+          oe,
           {
             active: s,
             onClick: t.toggleRightSidebar,
@@ -2199,22 +2210,22 @@ const Tr = I(
     color: "var(--vscode-textLink-foreground)",
     cursor: "pointer"
   }
-}, ot = I(
+}, it = V(
   {
     model: u.const(),
     nodes: u.const(),
     depth: u.const()
   },
-  (r, e) => /* @__PURE__ */ a(pe, { children: e.nodes.map((t) => /* @__PURE__ */ a(Or, { model: e.model, node: t, depth: e.depth }, t.id)) })
+  (r, e) => /* @__PURE__ */ a(ge, { children: e.nodes.map((t) => /* @__PURE__ */ a(Or, { model: e.model, node: t, depth: e.depth }, t.id)) })
 );
-class Ir extends F({
+class Ir extends B({
   model: u.const(),
   node: u.const(),
   depth: u.const()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "isHovered", x(this, !1));
+    l(this, "isHovered", w(this, !1));
     l(this, "setHovered", (t) => {
       this.isHovered.set(t, void 0);
     });
@@ -2242,54 +2253,54 @@ class Ir extends F({
     return !!(this.props.node.children && this.props.node.children.length > 0);
   }
 }
-const Or = E(Ir, {}, (r, e) => {
-  const t = e.explorerModel, n = e.treeNode, s = e.treeDepth, o = !!(n.children && n.children.length > 0), i = o ? t.isNodeExpanded(n.id, r) : !1, c = t.selectedNodeId.read(r) === n.id, h = e.isHovered.read(r), g = Ce(
-    p.treeItem,
+const Or = A(Ir, {}, (r, e) => {
+  const t = e.explorerModel, n = e.treeNode, s = e.treeDepth, o = !!(n.children && n.children.length > 0), i = o ? t.isNodeExpanded(n.id, r) : !1, c = t.selectedNodeId.read(r) === n.id, h = e.isHovered.read(r), m = Se(
+    f.treeItem,
     { paddingLeft: `${8 + s * 12}px` },
-    c && p.treeItemSelected,
-    !c && h && p.treeItemHover
+    c && f.treeItemSelected,
+    !c && h && f.treeItemHover
   );
-  return /* @__PURE__ */ f(pe, { children: [
-    /* @__PURE__ */ f(
+  return /* @__PURE__ */ p(ge, { children: [
+    /* @__PURE__ */ p(
       "div",
       {
-        style: g,
+        style: m,
         onClick: e.handleClick,
         onDoubleClick: e.handleDoubleClick,
         onMouseEnter: () => e.setHovered(!0),
         onMouseLeave: () => e.setHovered(!1),
         children: [
-          o ? /* @__PURE__ */ a("div", { style: p.treeItemChevron, onClick: e.handleChevronClick, children: i ? /* @__PURE__ */ a(_r, {}) : /* @__PURE__ */ a(vr, {}) }) : /* @__PURE__ */ a("div", { style: p.treeItemChevronPlaceholder }),
-          /* @__PURE__ */ a("div", { style: p.treeItemIcon, children: n.type === "folder" ? /* @__PURE__ */ a(yr, { style: { color: "var(--vscode-symbolIcon-folderForeground)" } }) : /* @__PURE__ */ a(br, { style: { color: "#deb45b" } }) }),
-          /* @__PURE__ */ a("span", { style: p.treeItemLabel, children: n.name }),
-          o && /* @__PURE__ */ a("span", { style: p.treeItemCount, children: n.children.length })
+          o ? /* @__PURE__ */ a("div", { style: f.treeItemChevron, onClick: e.handleChevronClick, children: i ? /* @__PURE__ */ a(_r, {}) : /* @__PURE__ */ a(vr, {}) }) : /* @__PURE__ */ a("div", { style: f.treeItemChevronPlaceholder }),
+          /* @__PURE__ */ a("div", { style: f.treeItemIcon, children: n.type === "folder" ? /* @__PURE__ */ a(yr, { style: { color: "var(--vscode-symbolIcon-folderForeground)" } }) : /* @__PURE__ */ a(br, { style: { color: "#deb45b" } }) }),
+          /* @__PURE__ */ a("span", { style: f.treeItemLabel, children: n.name }),
+          o && /* @__PURE__ */ a("span", { style: f.treeItemCount, children: n.children.length })
         ]
       }
     ),
-    o && i && /* @__PURE__ */ a(ot, { model: t, nodes: n.children, depth: s + 1 })
+    o && i && /* @__PURE__ */ a(it, { model: t, nodes: n.children, depth: s + 1 })
   ] });
-}), kr = I(
+}), kr = V(
   {
     model: u.const()
   },
   (r, e) => {
     const t = e.model.tree.read(r);
-    return /* @__PURE__ */ f("div", { style: p.sidebar, children: [
-      /* @__PURE__ */ a("div", { style: p.sidebarHeader, children: "Explorer" }),
-      /* @__PURE__ */ a("div", { style: p.sidebarContent, children: /* @__PURE__ */ a(ot, { model: e.model, nodes: [t], depth: 0 }) })
+    return /* @__PURE__ */ p("div", { style: f.sidebar, children: [
+      /* @__PURE__ */ a("div", { style: f.sidebarHeader, children: "Explorer" }),
+      /* @__PURE__ */ a("div", { style: f.sidebarContent, children: /* @__PURE__ */ a(it, { model: e.model, nodes: [t], depth: 0 }) })
     ] });
   }
 );
-class Vr extends F({}) {
+class Vr extends B({}) {
   constructor() {
     super(...arguments);
-    l(this, "checked", x(this, !1));
+    l(this, "checked", w(this, !1));
     l(this, "toggle", () => {
       this.checked.set(!this.checked.get(), void 0);
     });
   }
 }
-const Nr = E(Vr, {}, (r, e) => {
+const Nr = A(Vr, {}, (r, e) => {
   const t = e.checked.read(r), n = {
     position: "relative",
     width: "36px",
@@ -2310,13 +2321,13 @@ const Nr = E(Vr, {}, (r, e) => {
     transition: "left 0.2s"
   };
   return /* @__PURE__ */ a("div", { style: n, onClick: e.toggle, children: /* @__PURE__ */ a("div", { style: s }) });
-}), Dr = I(
+}), Mr = V(
   {
     node: u.const()
   },
-  (r, e) => e.node.type !== "component" ? /* @__PURE__ */ a("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component (not a folder) to view its properties" }) : /* @__PURE__ */ f("div", { style: p.propertiesPanel, children: [
-    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
-      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
+  (r, e) => e.node.type !== "component" ? /* @__PURE__ */ a("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component (not a folder) to view its properties" }) : /* @__PURE__ */ p("div", { style: f.propertiesPanel, children: [
+    /* @__PURE__ */ p("div", { style: f.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: f.propertyLabel, children: [
         "children",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : string" })
       ] }),
@@ -2324,60 +2335,60 @@ const Nr = E(Vr, {}, (r, e) => {
         "input",
         {
           type: "text",
-          style: p.propertyInput,
+          style: f.propertyInput,
           defaultValue: "Click me",
           placeholder: "Enter text..."
         }
       ),
-      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Button text content" })
+      /* @__PURE__ */ a("div", { style: f.propertyDescription, children: "Button text content" })
     ] }),
-    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
-      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
+    /* @__PURE__ */ p("div", { style: f.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: f.propertyLabel, children: [
         "variant",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : select" })
       ] }),
-      /* @__PURE__ */ f("select", { style: p.propertySelect, defaultValue: "default", children: [
+      /* @__PURE__ */ p("select", { style: f.propertySelect, defaultValue: "default", children: [
         /* @__PURE__ */ a("option", { value: "default", children: "default" }),
         /* @__PURE__ */ a("option", { value: "primary", children: "primary" }),
         /* @__PURE__ */ a("option", { value: "secondary", children: "secondary" }),
         /* @__PURE__ */ a("option", { value: "destructive", children: "destructive" })
       ] }),
-      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Visual style variant" })
+      /* @__PURE__ */ a("div", { style: f.propertyDescription, children: "Visual style variant" })
     ] }),
-    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
-      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
+    /* @__PURE__ */ p("div", { style: f.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: f.propertyLabel, children: [
         "size",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : select" })
       ] }),
-      /* @__PURE__ */ f("select", { style: p.propertySelect, defaultValue: "default", children: [
+      /* @__PURE__ */ p("select", { style: f.propertySelect, defaultValue: "default", children: [
         /* @__PURE__ */ a("option", { value: "sm", children: "sm" }),
         /* @__PURE__ */ a("option", { value: "default", children: "default" }),
         /* @__PURE__ */ a("option", { value: "lg", children: "lg" })
       ] }),
-      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Button size" })
+      /* @__PURE__ */ a("div", { style: f.propertyDescription, children: "Button size" })
     ] }),
-    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
-      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
+    /* @__PURE__ */ p("div", { style: f.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: f.propertyLabel, children: [
         "disabled",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : boolean" })
       ] }),
       /* @__PURE__ */ a(Nr, {}),
-      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Disable the button" })
+      /* @__PURE__ */ a("div", { style: f.propertyDescription, children: "Disable the button" })
     ] })
   ] })
-), Mr = I(
+), Dr = V(
   {
     selectedNode: u.const()
   },
-  (r, e) => /* @__PURE__ */ f("div", { style: Ce(p.sidebar, p.sidebarRight), children: [
-    /* @__PURE__ */ f("div", { style: p.sidebarHeader, children: [
+  (r, e) => /* @__PURE__ */ p("div", { style: Se(f.sidebar, f.sidebarRight), children: [
+    /* @__PURE__ */ p("div", { style: f.sidebarHeader, children: [
       /* @__PURE__ */ a("span", { style: { marginRight: "6px", color: "var(--vscode-textLink-foreground)" }, children: "</>" }),
       "Props"
     ] }),
-    /* @__PURE__ */ a("div", { style: p.sidebarContent, children: e.selectedNode ? /* @__PURE__ */ a(Dr, { node: e.selectedNode }) : /* @__PURE__ */ a("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component to view its properties" }) })
+    /* @__PURE__ */ a("div", { style: f.sidebarContent, children: e.selectedNode ? /* @__PURE__ */ a(Mr, { node: e.selectedNode }) : /* @__PURE__ */ a("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component to view its properties" }) })
   ] })
 );
-class Fr extends F({
+class Fr extends B({
   fixture: u.const(),
   compact: u.const()
 }) {
@@ -2389,8 +2400,8 @@ class Fr extends F({
     l(this, "_renderResult", null);
     l(this, "_abortController", null);
     l(this, "_resizeObserver", null);
-    l(this, "measuredWidth", x(this, void 0));
-    l(this, "measuredHeight", x(this, void 0));
+    l(this, "measuredWidth", w(this, void 0));
+    l(this, "measuredHeight", w(this, void 0));
     l(this, "setContainerRef", (t) => {
       if (t === this._containerRef || (this._cleanup(), this._containerRef = t, !t)) return;
       const n = this.fixture.component;
@@ -2465,34 +2476,34 @@ class Fr extends F({
     this._cleanup();
   }
 }
-const it = E(
+const at = A(
   Fr,
   {},
   (r, e) => {
     const t = e.fixture, n = t.component, s = n.displayMode, o = e.measuredWidth.read(r), i = e.measuredHeight.read(r), d = e.compact;
     let c;
     if (s.type === "page") {
-      const C = s.viewports[0], m = wt(C);
+      const R = s.viewports[0], g = wt(R);
       c = {
-        width: m.width,
-        height: m.height,
+        width: g.width,
+        height: g.height,
         overflow: "auto"
       };
     } else
       c = {
         display: "inline-block"
       };
-    const h = o && i ? `${o} × ${i}` : "", g = d ? G.wrapperCompact : G.wrapper, _ = d ? G.nameCompact : G.name;
-    return /* @__PURE__ */ f("div", { style: g, children: [
-      /* @__PURE__ */ f("div", { style: G.labelRow, children: [
-        /* @__PURE__ */ a("span", { style: _, children: t.name }),
+    const h = o && i ? `${o} × ${i}` : "", m = d ? G.wrapperCompact : G.wrapper, v = d ? G.nameCompact : G.name;
+    return /* @__PURE__ */ p("div", { style: m, children: [
+      /* @__PURE__ */ p("div", { style: G.labelRow, children: [
+        /* @__PURE__ */ a("span", { style: v, children: t.name }),
         !d && h && /* @__PURE__ */ a("span", { style: G.dimensions, children: h })
       ] }),
       /* @__PURE__ */ a("div", { style: zr(n.background), children: /* @__PURE__ */ a("div", { ref: e.setContainerRef, style: c }) })
     ] });
   }
 ), W = 8;
-function at(r, e) {
+function dt(r, e) {
   return `
     linear-gradient(45deg, ${e} 25%, transparent 25%),
     linear-gradient(-45deg, ${e} 25%, transparent 25%),
@@ -2502,17 +2513,19 @@ function at(r, e) {
 }
 const Er = {
   backgroundColor: "#ffffff",
-  backgroundImage: at("#ffffff", "#e5e5e5")
+  backgroundImage: dt("#ffffff", "#e5e5e5")
 }, Br = {
   backgroundColor: "#1e1e1e",
-  backgroundImage: at("#1e1e1e", "#2d2d2d")
+  backgroundImage: dt("#1e1e1e", "#2d2d2d")
 }, Ar = {
   display: "inline-block",
   padding: "12px",
   borderRadius: "4px",
   backgroundSize: `${W * 2}px ${W * 2}px`,
   backgroundPosition: `0 0, 0 ${W}px, ${W}px -${W}px, -${W}px 0`,
-  boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)"
+  boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)",
+  overflow: "hidden",
+  position: "relative"
 };
 function zr(r) {
   const e = r === "dark" ? Br : Er;
@@ -2551,16 +2564,16 @@ const G = {
     fontFamily: "var(--vscode-editor-font-family, monospace)"
   }
 };
-class $r extends F({
+class $r extends B({
   fixtureId: u.const(),
   sessionName: u.const(),
   daemon: u.const()
 }) {
   constructor(t) {
     super(t);
-    l(this, "screenshot", x(this, { status: "idle" }));
+    l(this, "screenshot", w(this, { status: "idle" }));
     l(this, "_fetchVersion", 0);
-    this._store.add(Ye((n) => {
+    this._store.add(Qe((n) => {
       this.props.daemon.sourceTreeIds.read(n).get(this.props.sessionName) && this._fetchScreenshot();
     }));
   }
@@ -2578,7 +2591,7 @@ class $r extends F({
     }
   }
 }
-const Be = E(
+const Ae = A(
   $r,
   {},
   (r, e) => {
@@ -2640,7 +2653,7 @@ const Be = E(
     border: "1px solid var(--vscode-panel-border)"
   }
 };
-class Lr extends F({
+class Lr extends B({
   fixtureId: u.const(),
   daemon: u.const(),
   baselineSession: u.const(),
@@ -2648,8 +2661,8 @@ class Lr extends F({
 }) {
   constructor(t) {
     super(t);
-    l(this, "comparisonStatus", x(this, { status: "loading" }));
-    this._store.add(Ye((n) => {
+    l(this, "comparisonStatus", w(this, { status: "loading" }));
+    this._store.add(Qe((n) => {
       const s = this.props.daemon.sourceTreeIds.read(n), o = s.get(this.props.baselineSession), i = s.get(this.props.currentSession);
       o && i && this._fetchComparison();
     }));
@@ -2680,21 +2693,21 @@ class Lr extends F({
     }
   }
 }
-const Hr = E(
+const Hr = A(
   Lr,
   {},
   (r, e) => {
-    const t = e.comparisonStatus.read(r), n = t.status === "loading" ? /* @__PURE__ */ a("span", { style: w.badgeLoading, children: "comparing..." }) : t.status === "error" ? /* @__PURE__ */ a("span", { style: w.badgeError, children: "error" }) : t.match ? /* @__PURE__ */ a("span", { style: w.badgeMatch, children: "✓ match" }) : /* @__PURE__ */ a("span", { style: w.badgeChanged, children: "● changed" });
-    return /* @__PURE__ */ f("div", { style: w.fixtureRow, children: [
-      /* @__PURE__ */ f("div", { style: w.fixtureLabel, children: [
-        /* @__PURE__ */ a("span", { style: w.fixtureName, children: e.fixtureId }),
+    const t = e.comparisonStatus.read(r), n = t.status === "loading" ? /* @__PURE__ */ a("span", { style: T.badgeLoading, children: "comparing..." }) : t.status === "error" ? /* @__PURE__ */ a("span", { style: T.badgeError, children: "error" }) : t.match ? /* @__PURE__ */ a("span", { style: T.badgeMatch, children: "✓ match" }) : /* @__PURE__ */ a("span", { style: T.badgeChanged, children: "● changed" });
+    return /* @__PURE__ */ p("div", { style: T.fixtureRow, children: [
+      /* @__PURE__ */ p("div", { style: T.fixtureLabel, children: [
+        /* @__PURE__ */ a("span", { style: T.fixtureName, children: e.fixtureId }),
         n
       ] }),
-      /* @__PURE__ */ f("div", { style: w.sideBySide, children: [
-        /* @__PURE__ */ f("div", { style: w.screenshotColumn, children: [
-          /* @__PURE__ */ a("span", { style: w.columnLabel, children: "Current" }),
+      /* @__PURE__ */ p("div", { style: T.sideBySide, children: [
+        /* @__PURE__ */ p("div", { style: T.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: T.columnLabel, children: "Current" }),
           /* @__PURE__ */ a(
-            Be,
+            Ae,
             {
               fixtureId: e.fixtureId,
               sessionName: e.currentSession,
@@ -2702,10 +2715,10 @@ const Hr = E(
             }
           )
         ] }),
-        /* @__PURE__ */ f("div", { style: w.screenshotColumn, children: [
-          /* @__PURE__ */ a("span", { style: w.columnLabel, children: "Baseline" }),
+        /* @__PURE__ */ p("div", { style: T.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: T.columnLabel, children: "Baseline" }),
           /* @__PURE__ */ a(
-            Be,
+            Ae,
             {
               fixtureId: e.fixtureId,
               sessionName: e.baselineSession,
@@ -2716,7 +2729,7 @@ const Hr = E(
       ] })
     ] });
   }
-), jr = I(
+), jr = V(
   {
     name: u.const(),
     path: u.const(),
@@ -2725,9 +2738,9 @@ const Hr = E(
     baselineSession: u.const(),
     currentSession: u.const()
   },
-  (r, e) => /* @__PURE__ */ f("div", { children: [
-    /* @__PURE__ */ a("div", { style: w.groupHeader, children: /* @__PURE__ */ a("span", { style: w.groupTitle, children: e.path }) }),
-    /* @__PURE__ */ a("div", { style: w.groupContent, children: e.items.map((t) => /* @__PURE__ */ a(
+  (r, e) => /* @__PURE__ */ p("div", { children: [
+    /* @__PURE__ */ a("div", { style: T.groupHeader, children: /* @__PURE__ */ a("span", { style: T.groupTitle, children: e.path }) }),
+    /* @__PURE__ */ a("div", { style: T.groupContent, children: e.items.map((t) => /* @__PURE__ */ a(
       Hr,
       {
         fixtureId: t.fixtureId,
@@ -2738,7 +2751,7 @@ const Hr = E(
       t.fixtureId
     )) })
   ] })
-), w = {
+), T = {
   groupHeader: {
     marginBottom: 12
   },
@@ -2807,7 +2820,7 @@ const Hr = E(
     fontWeight: 500
   }
 }, q = 8;
-function dt(r, e) {
+function ct(r, e) {
   return `
     linear-gradient(45deg, ${e} 25%, transparent 25%),
     linear-gradient(-45deg, ${e} 25%, transparent 25%),
@@ -2817,10 +2830,10 @@ function dt(r, e) {
 }
 const Ur = {
   backgroundColor: "#ffffff",
-  backgroundImage: dt("#ffffff", "#e5e5e5")
+  backgroundImage: ct("#ffffff", "#e5e5e5")
 }, Pr = {
   backgroundColor: "#1e1e1e",
-  backgroundImage: dt("#1e1e1e", "#2d2d2d")
+  backgroundImage: ct("#1e1e1e", "#2d2d2d")
 }, Wr = {
   display: "inline-block",
   padding: "12px",
@@ -2837,26 +2850,26 @@ function Gr(r) {
     backgroundImage: e.backgroundImage
   };
 }
-function Ae({ src: r, alt: e, background: t }) {
-  return /* @__PURE__ */ a("div", { style: Gr(t), children: /* @__PURE__ */ a("img", { src: r, alt: e, style: y.image }) });
+function ze({ src: r, alt: e, background: t }) {
+  return /* @__PURE__ */ a("div", { style: Gr(t), children: /* @__PURE__ */ a("img", { src: r, alt: e, style: S.image }) });
 }
-const qr = I(
+const qr = V(
   {
     item: u.const(),
     reportModel: u.const()
   },
   (r, e) => {
-    const { item: t, reportModel: n } = e, { entry: s } = t, o = s.background ?? "light", i = s.status === "unchanged" ? /* @__PURE__ */ a("span", { style: y.badgeMatch, children: "✓ match" }) : s.status === "changed" ? /* @__PURE__ */ a("span", { style: y.badgeChanged, children: "● changed" }) : /* @__PURE__ */ a("span", { style: y.badgeAdded, children: "+ added" }), d = s.baselineScreenshot || s.currentScreenshot;
-    return /* @__PURE__ */ f("div", { style: y.fixtureRow, children: [
-      /* @__PURE__ */ f("div", { style: y.fixtureLabel, children: [
-        /* @__PURE__ */ a("span", { style: y.fixtureName, children: t.fixtureId }),
+    const { item: t, reportModel: n } = e, { entry: s } = t, o = s.background ?? "light", i = s.status === "unchanged" ? /* @__PURE__ */ a("span", { style: S.badgeMatch, children: "✓ match" }) : s.status === "changed" ? /* @__PURE__ */ a("span", { style: S.badgeChanged, children: "● changed" }) : /* @__PURE__ */ a("span", { style: S.badgeAdded, children: "+ added" }), d = s.baselineScreenshot || s.currentScreenshot;
+    return /* @__PURE__ */ p("div", { style: S.fixtureRow, children: [
+      /* @__PURE__ */ p("div", { style: S.fixtureLabel, children: [
+        /* @__PURE__ */ a("span", { style: S.fixtureName, children: t.fixtureId }),
         i
       ] }),
-      d && /* @__PURE__ */ f("div", { style: y.sideBySide, children: [
-        s.baselineScreenshot && /* @__PURE__ */ f("div", { style: y.screenshotColumn, children: [
-          /* @__PURE__ */ a("span", { style: y.columnLabel, children: "Baseline" }),
+      d && /* @__PURE__ */ p("div", { style: S.sideBySide, children: [
+        s.baselineScreenshot && /* @__PURE__ */ p("div", { style: S.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: S.columnLabel, children: "Baseline" }),
           /* @__PURE__ */ a(
-            Ae,
+            ze,
             {
               src: n.resolveScreenshotUrl(s.baselineScreenshot),
               alt: `Baseline screenshot of ${t.fixtureId}`,
@@ -2864,10 +2877,10 @@ const qr = I(
             }
           )
         ] }),
-        s.currentScreenshot && /* @__PURE__ */ f("div", { style: y.screenshotColumn, children: [
-          /* @__PURE__ */ a("span", { style: y.columnLabel, children: "Current" }),
+        s.currentScreenshot && /* @__PURE__ */ p("div", { style: S.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: S.columnLabel, children: "Current" }),
           /* @__PURE__ */ a(
-            Ae,
+            ze,
             {
               src: n.resolveScreenshotUrl(s.currentScreenshot),
               alt: `Current screenshot of ${t.fixtureId}`,
@@ -2876,22 +2889,22 @@ const qr = I(
           )
         ] })
       ] }),
-      !d && s.status === "unchanged" && /* @__PURE__ */ a("div", { style: y.hashRow, children: /* @__PURE__ */ f("span", { style: y.hashText, children: [
+      !d && s.status === "unchanged" && /* @__PURE__ */ a("div", { style: S.hashRow, children: /* @__PURE__ */ p("span", { style: S.hashText, children: [
         "hash: ",
         s.targetHash
       ] }) })
     ] });
   }
-), Kr = I(
+), Kr = V(
   {
     name: u.const(),
     path: u.const(),
     items: u.const(),
     reportModel: u.const()
   },
-  (r, e) => /* @__PURE__ */ f("div", { children: [
-    /* @__PURE__ */ a("div", { style: y.groupHeader, children: /* @__PURE__ */ a("span", { style: y.groupTitle, children: e.path }) }),
-    /* @__PURE__ */ a("div", { style: y.groupContent, children: e.items.map((t) => /* @__PURE__ */ a(
+  (r, e) => /* @__PURE__ */ p("div", { children: [
+    /* @__PURE__ */ a("div", { style: S.groupHeader, children: /* @__PURE__ */ a("span", { style: S.groupTitle, children: e.path }) }),
+    /* @__PURE__ */ a("div", { style: S.groupContent, children: e.items.map((t) => /* @__PURE__ */ a(
       qr,
       {
         item: t,
@@ -2900,7 +2913,7 @@ const qr = I(
       t.fixtureId
     )) })
   ] })
-), y = {
+), S = {
   groupHeader: {
     marginBottom: 12
   },
@@ -2972,37 +2985,37 @@ const qr = I(
     color: "var(--vscode-testing-iconQueued)",
     fontWeight: 500
   }
-}, ct = "component-explorer:fixtureHeights", ze = 500;
-let V = null;
-function lt() {
-  if (V !== null) return V;
+}, lt = "component-explorer:fixtureHeights", $e = 500;
+let M = null;
+function ht() {
+  if (M !== null) return M;
   try {
-    const r = localStorage.getItem(ct);
+    const r = localStorage.getItem(lt);
     if (r)
-      return V = JSON.parse(r), V;
+      return M = JSON.parse(r), M;
   } catch {
   }
-  return V = {}, V;
+  return M = {}, M;
 }
 function Jr() {
-  if (V !== null)
+  if (M !== null)
     try {
-      const r = Object.entries(V);
-      r.length > ze && (V = Object.fromEntries(r.slice(-ze))), localStorage.setItem(ct, JSON.stringify(V));
+      const r = Object.entries(M);
+      r.length > $e && (M = Object.fromEntries(r.slice(-$e))), localStorage.setItem(lt, JSON.stringify(M));
     } catch {
     }
 }
 function Zr(r, e) {
-  const t = lt();
+  const t = ht();
   t[r] = e, Jr();
 }
 function Xr() {
-  return new Map(Object.entries(lt()));
+  return new Map(Object.entries(ht()));
 }
-const Yr = 280, Qr = 32, re = 32, $e = 400, ht = "component-explorer:scrollAnchors", Le = 100;
-function ut() {
+const Yr = 280, Qr = 32, ne = 32, Le = 400, ut = "component-explorer:scrollAnchors", He = 100;
+function pt() {
   try {
-    const r = localStorage.getItem(ht);
+    const r = localStorage.getItem(ut);
     if (r) return JSON.parse(r);
   } catch {
   }
@@ -3010,22 +3023,22 @@ function ut() {
 }
 function en(r, e) {
   try {
-    const t = ut();
+    const t = pt();
     t[r] = e;
-    const n = Object.entries(t), s = n.length > Le ? Object.fromEntries(n.slice(-Le)) : t;
-    localStorage.setItem(ht, JSON.stringify(s));
+    const n = Object.entries(t), s = n.length > He ? Object.fromEntries(n.slice(-He)) : t;
+    localStorage.setItem(ut, JSON.stringify(s));
   } catch {
   }
 }
 function tn(r) {
-  return ut()[r];
+  return pt()[r];
 }
 function ft(r) {
   return r.type === "single" ? r.fixture.id : r.id;
 }
 function rn(r, e) {
   const t = new Array(r.length);
-  let n = re;
+  let n = ne;
   for (let s = 0; s < r.length; s++) {
     const o = e.get(ft(r[s])) ?? Yr;
     t[s] = { top: n, height: o }, n += o + Qr;
@@ -3035,9 +3048,9 @@ function rn(r, e) {
 function nn(r) {
   if (r.length === 0) return 0;
   const e = r[r.length - 1];
-  return e.top + e.height + re;
+  return e.top + e.height + ne;
 }
-function pt(r, e) {
+function gt(r, e) {
   let t = 0, n = r.length;
   for (; t < n; ) {
     const s = t + n >> 1;
@@ -3047,43 +3060,43 @@ function pt(r, e) {
 }
 function sn(r, e, t) {
   if (r.length === 0) return { start: 0, end: 0 };
-  const n = pt(r, e - $e);
+  const n = gt(r, e - Le);
   let s = n;
-  const o = e + t + $e;
+  const o = e + t + Le;
   for (; s < r.length && r[s].top < o; )
     s++;
   return { start: n, end: s };
 }
-function He(r, e) {
+function je(r, e) {
   if (r.length === 0) return;
-  const t = pt(r, e), n = Math.min(t, r.length - 1);
+  const t = gt(r, e), n = Math.min(t, r.length - 1);
   return {
     rowIndex: n,
     offsetFromViewport: r[n].top - e
   };
 }
-function je(r, e) {
+function Ue(r, e) {
   return e.rowIndex >= r.length ? 0 : r[e.rowIndex].top - e.offsetFromViewport;
 }
-class on extends F({
+class on extends B({
   model: u.const()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "_rowHeights", x(this, Xr()));
-    l(this, "_scrollTop", x(this, 0));
-    l(this, "_viewportHeight", x(this, 0));
+    l(this, "_rowHeights", w(this, Xr()));
+    l(this, "_scrollTop", w(this, 0));
+    l(this, "_viewportHeight", w(this, 0));
     l(this, "_scrollContainerRef", null);
     l(this, "_resizeObserver", null);
     l(this, "_viewportResizeObserver", null);
     l(this, "_currentNodeId");
     l(this, "_scrollSaveTimeout", null);
     l(this, "_suppressScrollHandler", !1);
-    l(this, "layout", N(this, (t) => {
+    l(this, "layout", D(this, (t) => {
       const n = this.explorerModel.selectedFixtures.read(t), s = this._rowHeights.read(t);
       return rn(n, s);
     }));
-    l(this, "visibleRowRange", N(this, (t) => {
+    l(this, "visibleRowRange", D(this, (t) => {
       const n = this.layout.read(t), s = this._scrollTop.read(t), o = this._viewportHeight.read(t);
       return sn(n, s, o);
     }));
@@ -3096,7 +3109,7 @@ class on extends F({
     l(this, "_handleScroll", () => {
       this._scrollContainerRef && (this._scrollTop.set(this._scrollContainerRef.scrollTop, void 0), !(this._suppressScrollHandler || !this._currentNodeId) && (this._scrollSaveTimeout && clearTimeout(this._scrollSaveTimeout), this._scrollSaveTimeout = setTimeout(() => {
         if (!this._currentNodeId) return;
-        const t = this.layout.get(), n = He(t, this._scrollTop.get());
+        const t = this.layout.get(), n = je(t, this._scrollTop.get());
         n && en(this._currentNodeId, n);
       }, 150)));
     });
@@ -3111,10 +3124,10 @@ class on extends F({
           h > 0 && o.get(c) !== h && (i || (i = new Map(o)), i.set(c, h), Zr(c, h));
         }
         if (i) {
-          const d = this.layout.get(), c = He(d, this._scrollTop.get());
+          const d = this.layout.get(), c = je(d, this._scrollTop.get());
           if (this._rowHeights.set(i, void 0), c && this._scrollContainerRef) {
-            const h = this.layout.get(), g = je(h, c);
-            this._suppressScrollHandler = !0, this._scrollContainerRef.scrollTop = g, this._scrollTop.set(g, void 0), requestAnimationFrame(() => {
+            const h = this.layout.get(), m = Ue(h, c);
+            this._suppressScrollHandler = !0, this._scrollContainerRef.scrollTop = m, this._scrollTop.set(m, void 0), requestAnimationFrame(() => {
               this._suppressScrollHandler = !1;
             });
           }
@@ -3132,7 +3145,7 @@ class on extends F({
     if (!this._scrollContainerRef || !this._currentNodeId) return;
     const t = tn(this._currentNodeId);
     if (!t) return;
-    const n = this.layout.get(), s = je(n, t);
+    const n = this.layout.get(), s = Ue(n, t);
     this._suppressScrollHandler = !0, this._scrollContainerRef.scrollTop = s, this._scrollTop.set(s, void 0), requestAnimationFrame(() => {
       this._suppressScrollHandler = !1;
     });
@@ -3142,7 +3155,7 @@ class on extends F({
     (t = this._resizeObserver) == null || t.disconnect(), (n = this._viewportResizeObserver) == null || n.disconnect(), this._scrollContainerRef && this._scrollContainerRef.removeEventListener("scroll", this._handleScroll), this._scrollSaveTimeout && clearTimeout(this._scrollSaveTimeout);
   }
 }
-const an = E(
+const an = A(
   on,
   {},
   (r, e) => {
@@ -3152,24 +3165,24 @@ const an = E(
       if (c) {
         const h = c.state.read(r);
         if (h.status === "loading")
-          return /* @__PURE__ */ a("div", { style: k.emptyState, children: /* @__PURE__ */ a("span", { style: k.emptyText, children: "Loading report..." }) });
+          return /* @__PURE__ */ a("div", { style: N.emptyState, children: /* @__PURE__ */ a("span", { style: N.emptyText, children: "Loading report..." }) });
         if (h.status === "error")
-          return /* @__PURE__ */ a("div", { style: k.emptyState, children: /* @__PURE__ */ f("span", { style: { ...k.emptyText, color: "var(--vscode-errorForeground)" }, children: [
+          return /* @__PURE__ */ a("div", { style: N.emptyState, children: /* @__PURE__ */ p("span", { style: { ...N.emptyText, color: "var(--vscode-errorForeground)" }, children: [
             "Failed to load report: ",
             h.message
           ] }) });
       }
-      return /* @__PURE__ */ a("div", { style: k.emptyState, children: /* @__PURE__ */ a("span", { style: k.emptyText, children: "Select a component or folder to preview" }) });
+      return /* @__PURE__ */ a("div", { style: N.emptyState, children: /* @__PURE__ */ a("span", { style: N.emptyText, children: "Select a component or folder to preview" }) });
     }
     const d = nn(s);
-    return /* @__PURE__ */ a("div", { ref: e.setScrollContainerRef, style: k.scrollContainer, children: /* @__PURE__ */ a("div", { style: { position: "relative", height: d }, children: t.slice(o, i).map((c, h) => {
-      const g = o + h, { top: _ } = s[g], C = ft(c);
+    return /* @__PURE__ */ a("div", { ref: e.setScrollContainerRef, style: N.scrollContainer, children: /* @__PURE__ */ a("div", { style: { position: "relative", height: d }, children: t.slice(o, i).map((c, h) => {
+      const m = o + h, { top: v } = s[m], R = ft(c);
       return /* @__PURE__ */ a(
         "div",
         {
-          ref: (m) => e.observeRowElement(m, C),
-          style: { position: "absolute", top: _, left: re, right: re },
-          children: c.type === "single" ? /* @__PURE__ */ a(it, { fixture: c.fixture, compact: !1 }) : c.type === "variants" ? /* @__PURE__ */ a(dn, { row: c }) : c.type === "screenshot-comparison" && e.explorerModel.daemon ? /* @__PURE__ */ a(
+          ref: (g) => e.observeRowElement(g, R),
+          style: { position: "absolute", top: v, left: ne, right: ne },
+          children: c.type === "single" ? /* @__PURE__ */ a(at, { fixture: c.fixture, compact: !1 }) : c.type === "variants" ? /* @__PURE__ */ a(dn, { row: c }) : c.type === "screenshot-comparison" && e.explorerModel.daemon ? /* @__PURE__ */ a(
             jr,
             {
               name: c.name,
@@ -3189,20 +3202,20 @@ const an = E(
             }
           ) : null
         },
-        C
+        R
       );
     }) }) });
   }
-), dn = I(
+), dn = V(
   { row: u.const() },
   (r, e) => {
     const t = e.row;
-    return /* @__PURE__ */ f("div", { children: [
-      /* @__PURE__ */ a("div", { style: k.variantsHeader, children: /* @__PURE__ */ a("span", { style: k.variantsTitle, children: t.path }) }),
-      /* @__PURE__ */ a("div", { style: k.variantsContent, children: t.fixtures.map((n) => /* @__PURE__ */ a(it, { fixture: n, compact: !0 }, n.id)) })
+    return /* @__PURE__ */ p("div", { children: [
+      /* @__PURE__ */ a("div", { style: N.variantsHeader, children: /* @__PURE__ */ a("span", { style: N.variantsTitle, children: t.path }) }),
+      /* @__PURE__ */ a("div", { style: N.variantsContent, children: t.fixtures.map((n) => /* @__PURE__ */ a(at, { fixture: n, compact: !0 }, n.id)) })
     ] });
   }
-), k = {
+), N = {
   scrollContainer: {
     flex: 1,
     overflow: "auto",
@@ -3233,18 +3246,18 @@ const an = E(
     flexWrap: "wrap",
     gap: "16px"
   }
-}, cn = E(
+}, cn = A(
   gr,
   { daemonModel: u.const(), reportModel: u.const() },
   (r, e) => {
     const t = e.leftSidebarVisible.read(r), n = e.rightSidebarVisible.read(r), s = e.isDarkTheme.read(r), o = e.selectedNode.read(r);
-    return /* @__PURE__ */ f("div", { className: s ? "vscode-theme default-dark-plus" : "vscode-theme default-light-plus", style: p.container, children: [
+    return /* @__PURE__ */ p("div", { className: s ? "vscode-theme default-dark-plus" : "vscode-theme default-light-plus", style: f.container, children: [
       t && /* @__PURE__ */ a(kr, { model: e }),
-      /* @__PURE__ */ f("div", { style: p.centerArea, children: [
+      /* @__PURE__ */ p("div", { style: f.centerArea, children: [
         /* @__PURE__ */ a(Tr, { model: e }),
         /* @__PURE__ */ a(an, { model: e })
       ] }),
-      n && /* @__PURE__ */ a(Mr, { selectedNode: o })
+      n && /* @__PURE__ */ a(Dr, { selectedNode: o })
     ] });
   }
 );
@@ -3281,7 +3294,7 @@ var ln = class fe {
     });
   }
 };
-function fn(r, e) {
+function pn(r, e) {
   return new un(async (t, n) => {
     var d;
     const s = await fetch(`${r}/${t}`, {
@@ -3299,33 +3312,33 @@ function fn(r, e) {
     }
     const o = s.headers.get("Content-Type");
     return o != null && o.startsWith("application/jsonl") ? ln.fromFn(async function* () {
-      var C;
-      const c = (C = s.body) == null ? void 0 : C.getReader();
+      var R;
+      const c = (R = s.body) == null ? void 0 : R.getReader();
       if (!c)
         return;
       let h = "";
-      const g = new TextDecoder("utf-8");
+      const m = new TextDecoder("utf-8");
       for (; ; ) {
-        const { done: m, value: v } = await c.read();
-        if (m)
+        const { done: g, value: _ } = await c.read();
+        if (g)
           break;
-        h += g.decode(v, { stream: !0 });
-        let O;
-        for (; (O = h.indexOf(`
+        h += m.decode(_, { stream: !0 });
+        let b;
+        for (; (b = h.indexOf(`
 `)) >= 0; ) {
-          const S = h.slice(0, O).trim();
-          h = h.slice(O + 1), S.length > 0 && (yield JSON.parse(S));
+          const y = h.slice(0, b).trim();
+          h = h.slice(b + 1), y.length > 0 && (yield JSON.parse(y));
         }
       }
-      const _ = h.trim();
-      _.length > 0 && (yield JSON.parse(_));
+      const v = h.trim();
+      v.length > 0 && (yield JSON.parse(v));
     }) : await s.json();
   });
 }
-class pn {
+class fn {
   constructor(e) {
-    l(this, "_sourceTreeIds", x(this, /* @__PURE__ */ new Map()));
-    l(this, "_sessions", x(this, []));
+    l(this, "_sourceTreeIds", w(this, /* @__PURE__ */ new Map()));
+    l(this, "_sessions", w(this, []));
     l(this, "_screenshotCache", /* @__PURE__ */ new Map());
     l(this, "_client");
     l(this, "_eventStreamAbort", null);
@@ -3334,7 +3347,7 @@ class pn {
     l(this, "sourceTreeIds", this._sourceTreeIds);
     /** Observable list of sessions from the daemon */
     l(this, "sessions", this._sessions);
-    this.config = e, this.sessionName = e.sessionName, this._client = fn("/__explorer/daemon-api");
+    this.config = e, this.sessionName = e.sessionName, this._client = pn("/__explorer/daemon-api");
   }
   /**
    * Initializes the model: fetches initial session info and starts listening to events.
@@ -3437,7 +3450,7 @@ function gn() {
 }
 class mn {
   constructor(e) {
-    l(this, "state", x(this, { status: "loading" }));
+    l(this, "state", w(this, { status: "loading" }));
     l(this, "_baseUrl");
     this.reportUrl = e;
     const t = e.lastIndexOf("/");
@@ -3478,8 +3491,8 @@ function vn(r) {
           reportEntry: n
         });
       else {
-        let g = o.children.find((_) => _.type === "folder" && _.name === d);
-        g || (g = { id: h, name: d, type: "folder", children: [] }, o.children.push(g)), o = g;
+        let m = o.children.find((v) => v.type === "folder" && v.name === d);
+        m || (m = { id: h, name: d, type: "folder", children: [] }, o.children.push(m)), o = m;
       }
     }
   }
@@ -3506,7 +3519,7 @@ class Vn {
     const e = gn();
     if (!e)
       return;
-    const t = new pn(e);
+    const t = new fn(e);
     return t.initialize().catch((n) => {
       console.error("[ExplorerApp] Failed to initialize DaemonModel:", n);
     }), t;
@@ -3543,7 +3556,7 @@ export {
   vr as ChevronRightIcon,
   kn as CliRuntime,
   br as ComponentIcon,
-  pn as DaemonModel,
+  fn as DaemonModel,
   cn as Explorer,
   Vn as ExplorerApp,
   gr as ExplorerModel,
@@ -3554,37 +3567,37 @@ export {
   xr as PanelLeftIcon,
   Cr as PanelRightIcon,
   mn as ReportModel,
-  Mr as RightSidebar,
+  Dr as RightSidebar,
   Sr as SunIcon,
   Tr as TitleBar,
-  se as TitleBarButton,
+  oe as TitleBarButton,
   Or as TreeItem,
-  ot as TreeView,
+  it as TreeView,
   St as VIEWPORT_SIZES,
-  Mn as asyncRender,
+  Dn as asyncRender,
   It as collectComponents,
-  Ie as createComponentDefinition,
-  oe as createFixtureTree,
+  Oe as createComponentDefinition,
+  ie as createFixtureTree,
   Fn as defineFixture,
   En as defineFixtureGroup,
   Bn as defineFixtureVariants,
-  Oe as findNodeByPath,
-  Se as fixtureGroupBrand,
-  we as fixtureVariantsBrand,
+  ke as findNodeByPath,
+  we as fixtureGroupBrand,
+  Re as fixtureVariantsBrand,
   Rt as getDefaultPropertyValues,
   On as isComponentDefinition,
-  me as isFixtureGroup,
-  ve as isFixtureVariants,
-  ge as isSingleFixture,
-  Ce as mergeStyles,
+  ve as isFixtureGroup,
+  _e as isFixtureVariants,
+  me as isSingleFixture,
+  Se as mergeStyles,
   wn as parseFixtureExport,
   Tn as parseFixtureGroup,
   In as parseFixtureVariants,
   Rn as parseSingleFixture,
   wt as resolveViewport,
-  Re as singleFixtureBrand,
-  p as styles,
+  Te as singleFixtureBrand,
+  f as styles,
   An as syncRender,
-  st as toExplorerTree
+  ot as toExplorerTree
 };
 //# sourceMappingURL=viewer.js.map