@vscode/component-explorer 0.1.1-10 → 0.1.1-11

package/dist/viewer.js

@@ -1,34 +1,34 @@
-var wt = Object.defineProperty;
-var St = (s, e, t) => e in s ? wt(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
-var l = (s, e, t) => St(s, typeof e != "symbol" ? e + "" : e, t);
-import { fixtureGroupBrand as Ve, fixtureVariantsBrand as ke, singleFixtureBrand as Ne, defineFixtureGroup as ae, defineFixture as L } from "./index.js";
-import { defineFixtureVariants as Ds } from "./index.js";
+var St = Object.defineProperty;
+var wt = (s, e, t) => e in s ? St(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t;
+var l = (s, e, t) => wt(s, typeof e != "symbol" ? e + "" : e, t);
+import { fixtureGroupBrand as ke, fixtureVariantsBrand as Ve, singleFixtureBrand as Ne } from "./index.js";
+import { defineFixture as Hs, defineFixtureGroup as Ls, defineFixtureVariants as Us } from "./index.js";
 import { createRoot as It } from "react-dom/client";
-import { createContext as Ke, useReducer as Ot, useState as Tt, useContext as Rt, useEffect as De, createElement as Vt } from "react";
-import { jsx as a, jsxs as g, Fragment as ye } from "react/jsx-runtime";
-import { unstable_batchedUpdates as Je } from "react-dom";
+import { createContext as Je, useReducer as Ot, useState as Rt, useContext as Tt, useEffect as De, createElement as kt } from "react";
+import { jsx as a, jsxs as f, Fragment as ye } from "react/jsx-runtime";
+import { unstable_batchedUpdates as Ze } from "react-dom";
 function xe(s) {
   return typeof s == "object" && s !== null && Ne in s && s[Ne] === !0 && "_options" in s && typeof s._options == "object";
 }
 function Ce(s) {
-  return typeof s == "object" && s !== null && Ve in s && s[Ve] === !0 && "_entries" in s && typeof s._entries == "object";
+  return typeof s == "object" && s !== null && ke in s && s[ke] === !0 && "_entries" in s && typeof s._entries == "object";
 }
-function we(s) {
-  return typeof s == "object" && s !== null && ke in s && s[ke] === !0 && "_variants" in s && typeof s._variants == "object";
+function Se(s) {
+  return typeof s == "object" && s !== null && Ve in s && s[Ve] === !0 && "_variants" in s && typeof s._variants == "object";
 }
-function Cs(s) {
-  return xe(s) ? { success: !0, data: s } : Ce(s) ? { success: !0, data: s } : we(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a valid fixture export (missing brand symbol or _options/_entries/_variants)" };
+function Ns(s) {
+  return xe(s) ? { success: !0, data: s } : Ce(s) ? { success: !0, data: s } : Se(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a valid fixture export (missing brand symbol or _options/_entries/_variants)" };
 }
-function ws(s) {
+function Ds(s) {
   return xe(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a SingleFixtureExport" };
 }
-function Ss(s) {
+function Ms(s) {
   return Ce(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a FixtureGroupExport" };
 }
-function Is(s) {
-  return we(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a FixtureVariantsExport" };
+function Fs(s) {
+  return Se(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a FixtureVariantsExport" };
 }
-function Ee(s, e, t) {
+function Me(s, e, t) {
   const n = s._options;
   return {
     id: e,
@@ -42,16 +42,16 @@ function Ee(s, e, t) {
     render: n.render
   };
 }
-function Os(s) {
+function Es(s) {
   return typeof s == "object" && s !== null && "render" in s && typeof s.render == "function" && "id" in s && "name" in s;
 }
-const kt = {
+const Vt = {
   mobile: { width: 390, height: 844 },
   tablet: { width: 768, height: 1024 },
   desktop: { width: 1440, height: 900 }
 };
 function Nt(s) {
-  return typeof s == "string" ? { name: s, ...kt[s] } : s;
+  return typeof s == "string" ? { name: s, ...Vt[s] } : s;
 }
 function Dt(s) {
   const e = {};
@@ -67,22 +67,22 @@ function le(s) {
     children: []
   };
   for (const [t, n] of s) {
-    const r = Et(t);
-    Ze(e, [r], n);
+    const r = Mt(t);
+    Xe(e, [r], n);
   }
   return e;
 }
-function Et(s) {
+function Mt(s) {
   return (s.split("/").pop() ?? s).replace(/\.fixture\.(tsx?|jsx?)$/, "");
 }
-function Ze(s, e, t) {
+function Xe(s, e, t) {
   var n;
   if (xe(t)) {
     const r = e.join("/"), i = e[e.length - 1], o = {
       id: r,
       name: i,
       type: "component",
-      component: Ee(t, r, i)
+      component: Me(t, r, i)
     };
     s.children || (s.children = []), s.children.push(o);
   } else if (Ce(t)) {
@@ -97,8 +97,8 @@ function Ze(s, e, t) {
       children: []
     }, s.children || (s.children = []), s.children.push(o));
     for (const [d, c] of Object.entries(t._entries))
-      Ze(o, [...e, d], c);
-  } else if (we(t)) {
+      Xe(o, [...e, d], c);
+  } else if (Se(t)) {
     const r = e[e.length - 1], o = {
       id: e.join("/"),
       name: r,
@@ -107,13 +107,13 @@ function Ze(s, e, t) {
     };
     s.children || (s.children = []), s.children.push(o);
     for (const [d, c] of Object.entries(t._variants)) {
-      const m = [...e, d].join("/"), v = {
+      const m = [...e, d].join("/"), _ = {
         id: m,
         name: d,
         type: "component",
-        component: Ee(c, m, d)
+        component: Me(c, m, d)
       };
-      o.children.push(v);
+      o.children.push(_);
     }
   }
 }
@@ -137,20 +137,20 @@ function Ft(s) {
   return e;
 }
 let j;
-function Xe(s) {
-  j ? j instanceof Ae ? j.loggers.push(s) : j = new Ae([j, s]) : j = s;
+function Qe(s) {
+  j ? j instanceof Ee ? j.loggers.push(s) : j = new Ee([j, s]) : j = s;
 }
 function b() {
   return j;
 }
 let he;
-function At(s) {
+function Et(s) {
   he = s;
 }
-function Mt(s) {
+function At(s) {
   he && he(s);
 }
-class Ae {
+class Ee {
   constructor(e) {
     this.loggers = e;
   }
@@ -220,16 +220,16 @@ var T;
     const o = Error, d = o.stackTraceLimit;
     o.stackTraceLimit = 3;
     const c = new Error().stack;
-    return o.stackTraceLimit = d, Se.fromStack(c, i + 1);
+    return o.stackTraceLimit = d, we.fromStack(c, i + 1);
   }
   s.ofNthCaller = r;
 })(T || (T = {}));
-class Se {
+class we {
   static fromStack(e, t) {
     const n = e.split(`
 `), r = Bt(n[t + 1]);
     if (r)
-      return new Se(r.fileName, r.line, r.column, r.id);
+      return new we(r.fileName, r.line, r.column, r.id);
   }
   constructor(e, t, n, r) {
     this.fileName = e, this.line = t, this.column = n, this.id = r;
@@ -255,7 +255,7 @@ function Bt(s) {
       id: s
     };
 }
-class A {
+class B {
   constructor(e, t, n) {
     this.owner = e, this.debugNameSource = t, this.referenceFn = n;
   }
@@ -263,24 +263,24 @@ class A {
     return zt(e, this);
   }
 }
-const Me = /* @__PURE__ */ new Map(), ue = /* @__PURE__ */ new WeakMap();
+const Ae = /* @__PURE__ */ new Map(), ue = /* @__PURE__ */ new WeakMap();
 function zt(s, e) {
   const t = ue.get(s);
   if (t)
     return t;
-  const n = Ht(s, e);
+  const n = $t(s, e);
   if (n) {
-    let r = Me.get(n) ?? 0;
-    r++, Me.set(n, r);
+    let r = Ae.get(n) ?? 0;
+    r++, Ae.set(n, r);
     const i = r === 1 ? n : `${n}#${r}`;
     return ue.set(s, i), i;
   }
 }
-function Ht(s, e) {
+function $t(s, e) {
   const t = ue.get(s);
   if (t)
     return t;
-  const n = e.owner ? $t(e.owner) + "." : "";
+  const n = e.owner ? Lt(e.owner) + "." : "";
   let r;
   const i = e.debugNameSource;
   if (i !== void 0)
@@ -293,18 +293,18 @@ function Ht(s, e) {
   if (o !== void 0 && (r = Ie(o), r !== void 0))
     return n + r;
   if (e.owner !== void 0) {
-    const d = Lt(e.owner, s);
+    const d = Ht(e.owner, s);
     if (d !== void 0)
       return n + d;
   }
 }
-function Lt(s, e) {
+function Ht(s, e) {
   for (const t in s)
     if (s[t] === e)
       return t;
 }
 const Be = /* @__PURE__ */ new Map(), ze = /* @__PURE__ */ new WeakMap();
-function $t(s) {
+function Lt(s) {
   const e = ze.get(s);
   if (e)
     return e;
@@ -324,21 +324,21 @@ function Ie(s) {
   return r == null ? void 0 : r.trim();
 }
 let fe;
-function jt(s) {
-  fe = s;
-}
-let Qe;
 function Ut(s) {
-  Qe = s;
+  fe = s;
 }
 let et;
-function Pt(s) {
+function jt(s) {
   et = s;
 }
 let tt;
-function Gt(s) {
+function Pt(s) {
   tt = s;
 }
+let nt;
+function Gt(s) {
+  nt = s;
+}
 class Wt {
   get TChange() {
     return null;
@@ -378,7 +378,7 @@ class Wt {
     }, (e) => this.read(e).read(e));
   }
   recomputeInitiallyAndOnChange(e, t) {
-    return e.add(Qe(this, t)), this;
+    return e.add(et(this, t)), this;
   }
   /**
    * Ensures that this observable is observed. This keeps the cache alive.
@@ -386,13 +386,13 @@ class Wt {
    * Use `recomputeInitiallyAndOnChange` for eager evaluation.
    */
   keepObserved(e) {
-    return e.add(et(this)), this;
+    return e.add(tt(this)), this;
   }
   get debugValue() {
     return this.get();
   }
   debugGetDependencyGraph() {
-    return tt(this);
+    return nt(this);
   }
 }
 class Oe extends Wt {
@@ -417,30 +417,30 @@ class Oe extends Wt {
   log() {
     var t;
     const e = !!b();
-    return Mt(this), e || (t = b()) == null || t.handleObservableCreated(this, T.ofCaller()), this;
+    return At(this), e || (t = b()) == null || t.handleObservableCreated(this, T.ofCaller()), this;
   }
   debugGetObservers() {
     return this._observers;
   }
 }
-function nt(s) {
+function st(s) {
   return {
     dispose: s
   };
 }
-class I extends Error {
+class O extends Error {
   constructor(e) {
-    super(e || "An unexpected bug occurred."), Object.setPrototypeOf(this, I.prototype);
+    super(e || "An unexpected bug occurred."), Object.setPrototypeOf(this, O.prototype);
   }
 }
-function ne(s) {
+function se(s) {
   throw s;
 }
 function pe(s) {
   console.error("Unexpected error:", s);
 }
-const X = (s, e) => s === e;
-function Q(s) {
+const Q = (s, e) => s === e;
+function ee(s) {
   return s != null;
 }
 class Y {
@@ -541,8 +541,8 @@ class w extends Oe {
         this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._value = this._computeFn(this, d);
       } finally {
         this._isReaderValid = !1;
-        for (const v of this._dependenciesToBeRemoved)
-          v.removeObserver(this);
+        for (const _ of this._dependenciesToBeRemoved)
+          _.removeObserver(this);
         this._dependenciesToBeRemoved.clear(), m !== void 0 && m.dispose();
       }
       e = this._didReportChange || c && !this._equalityComparator(h, this._value), (o = b()) == null || o.handleObservableUpdated(this, {
@@ -553,7 +553,7 @@ class w extends Oe {
         hadValue: c
       });
     } catch (d) {
-      ne(d);
+      se(d);
     }
     if (this._isComputing = !1, !this._didReportChange && e)
       for (const d of this._observers)
@@ -567,7 +567,7 @@ class w extends Oe {
   // IObserver Implementation
   beginUpdate(e) {
     if (this._isUpdating)
-      throw new I("Cyclic deriveds are not supported yet!");
+      throw new O("Cyclic deriveds are not supported yet!");
     this._updateCount++, this._isUpdating = !0;
     try {
       const t = this._updateCount === 1;
@@ -613,7 +613,7 @@ class w extends Oe {
           didChange: (o) => o === e
         }, this._changeSummary) : !0;
       } catch (o) {
-        ne(o);
+        se(o);
       }
       const i = this._state === 3;
       if (r && (this._state === 1 || i) && (this._state = 2, i))
@@ -624,7 +624,7 @@ class w extends Oe {
   // IReader Implementation
   _ensureReaderValid() {
     if (!this._isReaderValid)
-      throw new I("The reader object cannot be used outside its compute function!");
+      throw new O("The reader object cannot be used outside its compute function!");
   }
   readObservable(e) {
     this._ensureReaderValid(), e.addObserver(this);
@@ -673,24 +673,24 @@ class w extends Oe {
       i.handleChange(this, n);
   }
 }
-function N(s, e, t = T.ofCaller()) {
-  return e !== void 0 ? new w(new A(s, void 0, e), e, void 0, void 0, X, t) : new w(new A(void 0, void 0, s), s, void 0, void 0, X, t);
+function F(s, e, t = T.ofCaller()) {
+  return e !== void 0 ? new w(new B(s, void 0, e), e, void 0, void 0, Q, t) : new w(new B(void 0, void 0, s), s, void 0, void 0, Q, t);
 }
 function Kt(s, e, t = T.ofCaller()) {
-  return new w(new A(s.owner, s.debugName, s.debugReferenceFn), e, void 0, s.onLastObserverRemoved, s.equalsFn ?? X, t);
+  return new w(new B(s.owner, s.debugName, s.debugReferenceFn), e, void 0, s.onLastObserverRemoved, s.equalsFn ?? Q, t);
 }
-jt(Kt);
+Ut(Kt);
 function Jt(s, e, t = T.ofCaller()) {
   let n, r;
   n = s, r = void 0;
   let i;
-  return new w(new A(r, void 0, n), (o) => {
+  return new w(new B(r, void 0, n), (o) => {
     i ? i.clear() : i = new Y();
     const d = n(o);
     return d && i.add(d), d;
   }, void 0, () => {
     i && (i.dispose(), i = void 0);
-  }, X, t);
+  }, Q, t);
 }
 function Zt(s) {
   switch (s) {
@@ -704,7 +704,7 @@ function Zt(s) {
       return "<unknown>";
   }
 }
-class se {
+class re {
   get debugName() {
     return this._debugNameData.getDebugName(this) ?? "(anonymous)";
   }
@@ -733,7 +733,7 @@ class se {
         try {
           this._isRunning = !0, this._changeTracker && ((r = (n = this._changeTracker).beforeUpdate) == null || r.call(n, this, o), this._changeSummary = this._changeTracker.createChangeSummary(o)), this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._runFn(this, o);
         } catch (c) {
-          ne(c);
+          se(c);
         } finally {
           this._isRunning = !1, d !== void 0 && d.dispose();
         }
@@ -782,7 +782,7 @@ class se {
           didChange: (i) => i === e
         }, this._changeSummary) : !0) && (this._state = 2);
       } catch (r) {
-        ne(r);
+        se(r);
       }
     }
   }
@@ -792,7 +792,7 @@ class se {
   // IReader implementation
   _ensureNoRunning() {
     if (!this._isRunning)
-      throw new I("The reader object cannot be used outside its compute function!");
+      throw new O("The reader object cannot be used outside its compute function!");
   }
   readObservable(e) {
     if (this._ensureNoRunning(), this._disposed)
@@ -803,12 +803,12 @@ class se {
   }
   get store() {
     if (this._ensureNoRunning(), this._disposed)
-      throw new I("Cannot access store after dispose");
+      throw new O("Cannot access store after dispose");
     return this._store === void 0 && (this._store = new Y()), this._store;
   }
   get delayedStore() {
     if (this._ensureNoRunning(), this._disposed)
-      throw new I("Cannot access store after dispose");
+      throw new O("Cannot access store after dispose");
     return this._delayedStore === void 0 && (this._delayedStore = new Y()), this._delayedStore;
   }
   debugGetState() {
@@ -824,15 +824,15 @@ class se {
     this._isRunning ? this._state = 2 : this._run();
   }
 }
-function st(s, e = T.ofCaller()) {
-  return new se(new A(void 0, void 0, s), s, void 0, e);
+function rt(s, e = T.ofCaller()) {
+  return new re(new B(void 0, void 0, s), s, void 0, e);
 }
-function He(s) {
+function $e(s) {
   const e = new Error("BugIndicatingErrorRecovery: " + s);
   pe(e), console.error("recovered from an error that indicates a bug", e);
 }
-function rt(s, e) {
-  const t = new it(s, e);
+function it(s, e) {
+  const t = new ot(s, e);
   try {
     s(t);
   } finally {
@@ -840,9 +840,9 @@ function rt(s, e) {
   }
 }
 function Xt(s, e, t) {
-  s ? e(s) : rt(e, t);
+  s ? e(s) : it(e, t);
 }
-class it {
+class ot {
   constructor(e, t) {
     var n;
     this._fn = e, this._getDebugName = t, this._updatingObservers = [], (n = b()) == null || n.handleBeginTransaction(this);
@@ -852,7 +852,7 @@ class it {
   }
   updateObserver(e, t) {
     if (!this._updatingObservers) {
-      He("Transaction already finished!"), rt((n) => {
+      $e("Transaction already finished!"), it((n) => {
         n.updateObserver(e, t);
       });
       return;
@@ -863,7 +863,7 @@ class it {
     var t;
     const e = this._updatingObservers;
     if (!e) {
-      He("transaction.finish() has already been called!");
+      $e("transaction.finish() has already been called!");
       return;
     }
     for (let n = 0; n < e.length; n++) {
@@ -876,11 +876,11 @@ class it {
     return this._updatingObservers;
   }
 }
-function y(s, e, t = T.ofCaller()) {
+function x(s, e, t = T.ofCaller()) {
   let n;
-  return typeof s == "string" ? n = new A(void 0, s, void 0) : n = new A(s, void 0, void 0), new re(n, e, X, t);
+  return typeof s == "string" ? n = new B(void 0, s, void 0) : n = new B(s, void 0, void 0), new ie(n, e, Q, t);
 }
-class re extends Oe {
+class ie extends Oe {
   get debugName() {
     return this._debugNameData.getDebugName(this) ?? "ObservableValue";
   }
@@ -896,7 +896,7 @@ class re extends Oe {
     if (n === void 0 && this._equalityComparator(this._value, e))
       return;
     let r;
-    t || (t = r = new it(() => {
+    t || (t = r = new ot(() => {
     }, () => `Setting ${this.debugName}`));
     try {
       const o = this._value;
@@ -922,25 +922,25 @@ class re extends Oe {
     this._value = e;
   }
 }
-function Le(...s) {
+function He(...s) {
   let e, t, n, r;
-  return s.length === 2 ? [t, n] = s : [e, t, n, r] = s, new F(new A(e, void 0, n), t, n, () => F.globalTransaction, X, r ?? T.ofCaller());
+  return s.length === 2 ? [t, n] = s : [e, t, n, r] = s, new A(new B(e, void 0, n), t, n, () => A.globalTransaction, Q, r ?? T.ofCaller());
 }
-class F extends Oe {
+class A extends Oe {
   constructor(e, t, n, r, i, o) {
     super(o), this._debugNameData = e, this.event = t, this._getValue = n, this._getTransaction = r, this._equalityComparator = i, this._hasValue = !1, this.handleEvent = (d) => {
-      var p;
+      var g;
       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, Xt(this._getTransaction(), (_) => {
+      let _ = !1;
+      m && (this._value = c, this._hasValue && (_ = !0, Xt(this._getTransaction(), (v) => {
         var E;
         (E = b()) == null || E.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: m, hadValue: this._hasValue });
-        for (const R of this._observers)
-          _.updateObserver(R, this), R.handleChange(this, void 0);
+        for (const V of this._observers)
+          v.updateObserver(V, this), V.handleChange(this, void 0);
       }, () => {
-        const _ = this.getDebugName();
-        return "Event fired" + (_ ? `: ${_}` : "");
-      })), this._hasValue = !0), v || (p = b()) == null || p.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: m, hadValue: this._hasValue });
+        const v = this.getDebugName();
+        return "Event fired" + (v ? `: ${v}` : "");
+      })), this._hasValue = !0), _ || (g = b()) == null || g.handleObservableUpdated(this, { oldValue: h, newValue: c, change: void 0, didChange: m, hadValue: this._hasValue });
     };
   }
   getDebugName() {
@@ -967,39 +967,39 @@ class F extends Oe {
   }
 }
 (function(s) {
-  s.Observer = F;
+  s.Observer = A;
   function e(t, n) {
     let r = !1;
-    F.globalTransaction === void 0 && (F.globalTransaction = t, r = !0);
+    A.globalTransaction === void 0 && (A.globalTransaction = t, r = !0);
     try {
       n();
     } finally {
-      r && (F.globalTransaction = void 0);
+      r && (A.globalTransaction = void 0);
     }
   }
   s.batchEventsGlobally = e;
-})(Le || (Le = {}));
-function Yt(s) {
-  const e = new ot(!1, void 0);
-  return s.addObserver(e), nt(() => {
+})(He || (He = {}));
+function Qt(s) {
+  const e = new at(!1, void 0);
+  return s.addObserver(e), st(() => {
     s.removeObserver(e);
   });
 }
-Pt(Yt);
-function Qt(s, e) {
-  const t = new ot(!0, e);
+Pt(Qt);
+function Yt(s, e) {
+  const t = new at(!0, e);
   s.addObserver(t);
   try {
     t.beginUpdate(s);
   } finally {
     t.endUpdate(s);
   }
-  return nt(() => {
+  return st(() => {
     s.removeObserver(t);
   });
 }
-Ut(Qt);
-class ot {
+jt(Yt);
+class at {
   constructor(e, t) {
     this._forceRecompute = e, this._handleValue = t, this._counter = 0;
   }
@@ -1014,9 +1014,9 @@ class ot {
   handleChange(e, t) {
   }
 }
-let te;
+let ne;
 function en(s) {
-  te || (te = new tn(), Xe(te)), te.addFilteredObj(s);
+  ne || (ne = new tn(), Qe(ne)), ne.addFilteredObj(s);
 }
 class tn {
   constructor() {
@@ -1031,27 +1031,27 @@ class tn {
   }
   textToConsoleArgs(e) {
     return nn([
-      P(on("|  ", this.indentation)),
+      G(on("|  ", this.indentation)),
       e
     ]);
   }
   formatInfo(e) {
     return e.hadValue ? e.didChange ? [
-      P(" "),
-      S(k(e.oldValue, 70), {
+      G(" "),
+      I(M(e.oldValue, 70), {
         color: "red",
         strikeThrough: !0
       }),
-      P(" "),
-      S(k(e.newValue, 60), {
+      G(" "),
+      I(M(e.newValue, 60), {
         color: "green"
       })
-    ] : [P(" (unchanged)")] : [
-      P(" "),
-      S(k(e.newValue, 60), {
+    ] : [G(" (unchanged)")] : [
+      G(" "),
+      I(M(e.newValue, 60), {
         color: "green"
       }),
-      P(" (initial)")
+      G(" (initial)")
     ];
   }
   handleObservableCreated(e) {
@@ -1069,15 +1069,15 @@ class tn {
         return;
       }
       console.log(...this.textToConsoleArgs([
-        G("observable value changed"),
-        S(e.debugName, { color: "BlueViolet" }),
+        W("observable value changed"),
+        I(e.debugName, { color: "BlueViolet" }),
         ...this.formatInfo(t)
       ]));
     }
   }
   formatChanges(e) {
     if (e.size !== 0)
-      return S(" (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 r;
@@ -1088,8 +1088,8 @@ class tn {
       return;
     const n = this.changedObservablesSets.get(e);
     n && (console.log(...this.textToConsoleArgs([
-      G("derived recomputed"),
-      S(e.debugName, { color: "BlueViolet" }),
+      W("derived recomputed"),
+      I(e.debugName, { color: "BlueViolet" }),
       ...this.formatInfo(t),
       this.formatChanges(n),
       { data: [{ fn: e._debugNameData.referenceFn ?? e._computeFn }] }
@@ -1097,14 +1097,14 @@ class tn {
   }
   handleDerivedCleared(e) {
     this._isIncluded(e) && console.log(...this.textToConsoleArgs([
-      G("derived cleared"),
-      S(e.debugName, { color: "BlueViolet" })
+      W("derived cleared"),
+      I(e.debugName, { color: "BlueViolet" })
     ]));
   }
   handleFromEventObservableTriggered(e, t) {
     this._isIncluded(e) && console.log(...this.textToConsoleArgs([
-      G("observable from event triggered"),
-      S(e.debugName, { color: "BlueViolet" }),
+      W("observable from event triggered"),
+      I(e.debugName, { color: "BlueViolet" }),
       ...this.formatInfo(t),
       { data: [{ fn: e._getValue }] }
     ]));
@@ -1120,8 +1120,8 @@ class tn {
   handleAutorunStarted(e) {
     const t = this.changedObservablesSets.get(e);
     t && (this._isIncluded(e) && console.log(...this.textToConsoleArgs([
-      G("autorun"),
-      S(e.debugName, { color: "BlueViolet" }),
+      W("autorun"),
+      I(e.debugName, { color: "BlueViolet" }),
       this.formatChanges(t),
       { data: [{ fn: e._debugNameData.referenceFn ?? e._runFn }] }
     ])), t.clear(), this.indentation++);
@@ -1132,8 +1132,8 @@ class tn {
   handleBeginTransaction(e) {
     let t = e.getDebugName();
     t === void 0 && (t = ""), this._isIncluded(e) && console.log(...this.textToConsoleArgs([
-      G("transaction"),
-      S(t, { color: "BlueViolet" }),
+      W("transaction"),
+      I(t, { color: "BlueViolet" }),
       { data: [{ fn: e._fn }] }
     ])), this.indentation++;
   }
@@ -1154,13 +1154,13 @@ function nn(s) {
   const i = [n, ...e];
   return i.push(...t), i;
 }
-function P(s) {
-  return S(s, { color: "black" });
-}
 function G(s) {
-  return S(an(`${s}: `, 10), { color: "black", bold: !0 });
+  return I(s, { color: "black" });
 }
-function S(s, e = {
+function W(s) {
+  return I(an(`${s}: `, 10), { color: "black", bold: !0 });
+}
+function I(s, e = {
   color: "black"
 }) {
   function t(r) {
@@ -1174,7 +1174,7 @@ function S(s, e = {
     style: t(n)
   };
 }
-function k(s, e) {
+function M(s, e) {
   switch (typeof s) {
     case "number":
       return "" + s;
@@ -1201,7 +1201,7 @@ function sn(s, e) {
       t += "...";
       break;
     }
-    n = !1, t += `${k(r, e - t.length)}`;
+    n = !1, t += `${M(r, e - t.length)}`;
   }
   return t += " ]", t;
 }
@@ -1217,7 +1217,7 @@ function rn(s, e) {
       n += "...";
       break;
     }
-    r = !1, n += `${i}: ${k(o, e - n.length)}`;
+    r = !1, n += `${i}: ${M(o, e - n.length)}`;
   }
   return n += t ? ")" : " }", n;
 }
@@ -1232,12 +1232,12 @@ function an(s, e) {
     s += " ";
   return s;
 }
-class ie {
+class oe {
   static createHost(e, t) {
-    return new ie(e, t);
+    return new oe(e, t);
   }
   static createClient(e, t) {
-    return new ie(e, t);
+    return new oe(e, t);
   }
   constructor(e, t) {
     this._channelFactory = e, this._getHandler = t, this._channel = this._channelFactory({
@@ -1285,7 +1285,7 @@ function dn(s, e) {
     for (const h of n)
       c.sendNotification(h);
     return n = [], o;
-  }, ie.createClient(i, () => {
+  }, oe.createClient(i, () => {
     if (!d)
       throw new Error("Not supported");
     return d;
@@ -1320,17 +1320,17 @@ class ln {
     this._timeout !== void 0 && clearTimeout(this._timeout);
   }
 }
-function at(s, e) {
+function dt(s, e) {
   for (const t in e)
-    s[t] && typeof s[t] == "object" && e[t] && typeof e[t] == "object" ? at(s[t], e[t]) : s[t] = e[t];
+    s[t] && typeof s[t] == "object" && e[t] && typeof e[t] == "object" ? dt(s[t], e[t]) : s[t] = e[t];
 }
-function dt(s, e) {
+function ct(s, e) {
   for (const t in e)
-    e[t] === null ? delete s[t] : s[t] && typeof s[t] == "object" && e[t] && typeof e[t] == "object" ? dt(s[t], e[t]) : s[t] = e[t];
+    e[t] === null ? delete s[t] : s[t] && typeof s[t] == "object" && e[t] && typeof e[t] == "object" ? ct(s[t], e[t]) : s[t] = e[t];
 }
-class U {
+class P {
   static getInstance() {
-    return U._instance === void 0 && (U._instance = new U()), U._instance;
+    return P._instance === void 0 && (P._instance = new P()), P._instance;
   }
   getTransactionState() {
     const e = [], t = [...this._activeTransactions];
@@ -1352,7 +1352,7 @@ class U {
   _getObservableInfo(e) {
     const t = this._instanceInfos.get(e);
     if (!t) {
-      pe(new I("No info found"));
+      pe(new O("No info found"));
       return;
     }
     return t;
@@ -1360,7 +1360,7 @@ class U {
   _getAutorunInfo(e) {
     const t = this._instanceInfos.get(e);
     if (!t) {
-      pe(new I("No info found"));
+      pe(new O("No info found"));
       return;
     }
     return t;
@@ -1376,7 +1376,7 @@ class U {
       const i = e.debugGetState(), o = { name: e.debugName, instanceId: r.instanceId, updateCount: i.updateCount }, d = [...r.changedObservables].map((c) => {
         var h;
         return (h = this._instanceInfos.get(c)) == null ? void 0 : h.instanceId;
-      }).filter(Q);
+      }).filter(ee);
       if (i.isComputing)
         return { ...o, type: "observable/derived", state: "updating", changedDependencies: d, initialComputation: !1 };
       switch (i.state) {
@@ -1389,7 +1389,7 @@ class U {
         case 1:
           return { ...o, type: "observable/derived", state: "possiblyStale" };
       }
-    } else if (e instanceof se) {
+    } else if (e instanceof re) {
       const n = this._getAutorunInfo(e);
       if (!n)
         return;
@@ -1443,29 +1443,29 @@ class U {
         },
         getSummarizedInstances: () => null,
         getObservableValueInfo: (e) => ({
-          observers: [...this._aliveInstances.get(e).debugGetObservers()].map((n) => this._formatObserver(n)).filter(Q)
+          observers: [...this._aliveInstances.get(e).debugGetObservers()].map((n) => this._formatObserver(n)).filter(ee)
         }),
         getDerivedInfo: (e) => {
           const t = this._aliveInstances.get(e);
           return {
-            dependencies: [...t.debugGetState().dependencies].map((n) => this._formatObservable(n)).filter(Q),
-            observers: [...t.debugGetObservers()].map((n) => this._formatObserver(n)).filter(Q)
+            dependencies: [...t.debugGetState().dependencies].map((n) => this._formatObservable(n)).filter(ee),
+            observers: [...t.debugGetObservers()].map((n) => this._formatObserver(n)).filter(ee)
           };
         },
         getAutorunInfo: (e) => ({
-          dependencies: [...this._aliveInstances.get(e).debugGetState().dependencies].map((n) => this._formatObservable(n)).filter(Q)
+          dependencies: [...this._aliveInstances.get(e).debugGetState().dependencies].map((n) => this._formatObservable(n)).filter(ee)
         }),
         getTransactionState: () => this.getTransactionState(),
         setValue: (e, t) => {
           const n = this._aliveInstances.get(e);
           if (n instanceof w)
             n.debugSetValue(t);
-          else if (n instanceof re)
+          else if (n instanceof ie)
             n.debugSetValue(t);
-          else if (n instanceof F)
+          else if (n instanceof A)
             n.debugSetValue(t);
           else
-            throw new I("Observable is not supported");
+            throw new O("Observable is not supported");
           const r = [...n.debugGetObservers()];
           for (const i of r)
             i.beginUpdate(n);
@@ -1477,25 +1477,25 @@ class U {
         getValue: (e) => {
           const t = this._aliveInstances.get(e);
           if (t instanceof w)
-            return k(t.debugGetState().value, 200);
-          if (t instanceof re)
-            return k(t.debugGetState().value, 200);
+            return M(t.debugGetState().value, 200);
+          if (t instanceof ie)
+            return M(t.debugGetState().value, 200);
         },
         logValue: (e) => {
           const t = this._aliveInstances.get(e);
           if (t && "get" in t)
             console.log("Logged Value:", t.get());
           else
-            throw new I("Observable is not supported");
+            throw new O("Observable is not supported");
         },
         rerun: (e) => {
           const t = this._aliveInstances.get(e);
           if (t instanceof w)
             t.debugRecompute();
-          else if (t instanceof se)
+          else if (t instanceof re)
             t.debugRerun();
           else
-            throw new I("Observable is not supported");
+            throw new O("Observable is not supported");
         }
       }
     })), this._pendingChanges = null, this._changeThrottler = new ln(), this._fullState = {}, this._flushUpdates = () => {
@@ -1503,7 +1503,7 @@ class U {
     }, T.enable();
   }
   _handleChange(e) {
-    dt(this._fullState, e), this._pendingChanges === null ? this._pendingChanges = e : at(this._pendingChanges, e), this._changeThrottler.throttle(this._flushUpdates, 10);
+    ct(this._fullState, e), this._pendingChanges === null ? this._pendingChanges = e : dt(this._pendingChanges, e), this._changeThrottler.throttle(this._flushUpdates, 10);
   }
   _getDeclarationId(e, t) {
     if (!t)
@@ -1556,7 +1556,7 @@ class U {
       return;
     }
     const n = this._getObservableInfo(e);
-    n && t.didChange && (n.lastValue = k(t.newValue, 30), n.listenerCount > 0 && this._handleChange({
+    n && t.didChange && (n.lastValue = M(t.newValue, 30), n.listenerCount > 0 && this._handleChange({
       instances: { [n.instanceId]: { formattedValue: n.lastValue } }
     }));
   }
@@ -1605,7 +1605,7 @@ class U {
     const n = this._getObservableInfo(e);
     if (!n)
       return;
-    const r = k(t.newValue, 30);
+    const r = M(t.newValue, 30);
     n.updateCount++, n.changedObservables.clear(), n.lastValue = r, n.listenerCount > 0 && this._handleChange({
       instances: { [n.instanceId]: { formattedValue: r, recomputationCount: n.updateCount } }
     });
@@ -1627,55 +1627,55 @@ class U {
     this._activeTransactions.delete(e);
   }
 }
-U._instance = void 0;
+P._instance = void 0;
 function hn(s, e) {
-  const t = (e == null ? void 0 : e.debugNamePostProcessor) ?? ((i) => i), n = O.from(s, t);
-  return n ? ct(n, 0, /* @__PURE__ */ new Set()).trim() : "";
+  const t = (e == null ? void 0 : e.debugNamePostProcessor) ?? ((i) => i), n = R.from(s, t);
+  return n ? lt(n, 0, /* @__PURE__ */ new Set()).trim() : "";
 }
-function ct(s, e, t) {
+function lt(s, e, t) {
   const n = "		".repeat(e), r = [];
   if (t.has(s.sourceObj))
     return r.push(`${n}* ${s.type} ${s.name} (already listed)`), r.join(`
 `);
-  if (t.add(s.sourceObj), r.push(`${n}* ${s.type} ${s.name}:`), r.push(`${n}  value: ${k(s.value, 50)}`), r.push(`${n}  state: ${s.state}`), s.dependencies.length > 0) {
+  if (t.add(s.sourceObj), r.push(`${n}* ${s.type} ${s.name}:`), r.push(`${n}  value: ${M(s.value, 50)}`), r.push(`${n}  state: ${s.state}`), s.dependencies.length > 0) {
     r.push(`${n}  dependencies:`);
     for (const o of s.dependencies)
-      r.push(ct(o, e + 1, t));
+      r.push(lt(o, e + 1, t));
   }
   return r.join(`
 `);
 }
-class O {
+class R {
   static from(e, t) {
-    if (e instanceof se) {
+    if (e instanceof re) {
       const n = e.debugGetState();
-      return new O(e, t(e.debugName), "autorun", void 0, n.stateStr, Array.from(n.dependencies).map((r) => O.from(r, t) || O.unknown(r)));
+      return new R(e, t(e.debugName), "autorun", void 0, n.stateStr, Array.from(n.dependencies).map((r) => R.from(r, t) || R.unknown(r)));
     } else if (e instanceof w) {
       const n = e.debugGetState();
-      return new O(e, t(e.debugName), "derived", n.value, n.stateStr, Array.from(n.dependencies).map((r) => O.from(r, t) || O.unknown(r)));
-    } else if (e instanceof re) {
+      return new R(e, t(e.debugName), "derived", n.value, n.stateStr, Array.from(n.dependencies).map((r) => R.from(r, t) || R.unknown(r)));
+    } else if (e instanceof ie) {
       const n = e.debugGetState();
-      return new O(e, t(e.debugName), "observableValue", n.value, "upToDate", []);
-    } else if (e instanceof F) {
+      return new R(e, t(e.debugName), "observableValue", n.value, "upToDate", []);
+    } else if (e instanceof A) {
       const n = e.debugGetState();
-      return new O(e, t(e.debugName), "fromEvent", n.value, n.hasValue ? "upToDate" : "initial", []);
+      return new R(e, t(e.debugName), "fromEvent", n.value, n.hasValue ? "upToDate" : "initial", []);
     }
   }
   static unknown(e) {
-    return new O(e, "(unknown)", "unknown", void 0, "unknown", []);
+    return new R(e, "(unknown)", "unknown", void 0, "unknown", []);
   }
   constructor(e, t, n, r, i, o) {
     this.sourceObj = e, this.name = t, this.type = n, this.value = r, this.state = i, this.dependencies = o;
   }
 }
 Gt(hn);
-At(en);
-Xe(U.getInstance());
-class lt {
+Et(en);
+Qe(P.getInstance());
+class un {
   constructor() {
-    l(this, "_fixtures", y(this, /* @__PURE__ */ new Map()));
+    l(this, "_fixtures", x(this, /* @__PURE__ */ new Map()));
     /** Observable root of the fixture tree */
-    l(this, "root", N(this, (e) => {
+    l(this, "root", F(this, (e) => {
       const t = this._fixtures.read(e);
       return le(t);
     }));
@@ -1719,7 +1719,7 @@ class lt {
     return r == null ? void 0 : r.component;
   }
 }
-class Ts {
+class As {
   constructor(e, t) {
     l(this, "sessionId", Math.random().toString(36).slice(2));
     l(this, "_updateVersion", 0);
@@ -1755,33 +1755,33 @@ class Ts {
     const r = t.component, i = Dt(r.properties);
     let o = n;
     if (r.isolation === "shadow-dom") {
-      const p = n.attachShadow({ mode: "open" });
-      o = document.createElement("div"), p.appendChild(o);
+      const g = n.attachShadow({ mode: "open" });
+      o = document.createElement("div"), g.appendChild(o);
     }
     const d = [], c = console.error, h = console.warn;
-    console.error = (...p) => {
-      d.push({ kind: "console", level: "error", message: p.map(String).join(" ") }), c.apply(console, p);
-    }, console.warn = (...p) => {
-      d.push({ kind: "console", level: "warn", message: p.map(String).join(" ") }), h.apply(console, p);
+    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 m = (p) => {
-      var _;
-      d.push({ kind: "exception", message: p.message, stack: (_ = p.error) == null ? void 0 : _.stack });
-    }, v = (p) => {
-      const _ = p.reason, E = _ instanceof Error ? _.message : String(_), R = _ instanceof Error ? _.stack : void 0;
-      d.push({ kind: "exception", message: E, stack: R });
+    const m = (g) => {
+      var v;
+      d.push({ kind: "exception", message: g.message, stack: (v = g.error) == null ? void 0 : v.stack });
+    }, _ = (g) => {
+      const v = g.reason, E = v instanceof Error ? v.message : String(v), V = v instanceof Error ? v.stack : void 0;
+      d.push({ kind: "exception", message: E, stack: V });
     };
-    window.addEventListener("error", m), window.addEventListener("unhandledrejection", v);
+    window.addEventListener("error", m), window.addEventListener("unhandledrejection", _);
     try {
-      const p = r.render(o, i);
-      this._currentDisposable = p && typeof p == "object" && "dispose" in p ? p : void 0;
-    } catch (p) {
-      const _ = p instanceof Error ? p : new Error(String(p));
-      d.push({ kind: "exception", message: _.message, stack: _.stack });
+      const g = r.render(o, i);
+      this._currentDisposable = g && typeof g == "object" && "dispose" in g ? g : void 0;
+    } catch (g) {
+      const v = g instanceof Error ? g : new Error(String(g));
+      d.push({ kind: "exception", message: v.message, stack: v.stack });
     } finally {
       console.error = c, console.warn = h;
     }
-    return await new Promise((p) => requestAnimationFrame(() => requestAnimationFrame(() => p()))), window.removeEventListener("error", m), window.removeEventListener("unhandledrejection", v), { errors: d };
+    return await new Promise((g) => requestAnimationFrame(() => requestAnimationFrame(() => g()))), window.removeEventListener("error", m), window.removeEventListener("unhandledrejection", _), { errors: d };
   }
   _buildRegistry() {
     const e = /* @__PURE__ */ new Map();
@@ -1792,11 +1792,12 @@ class Ts {
     return le(e);
   }
   _flattenFixtures(e, t = []) {
+    var r;
     const n = [];
-    e.type === "component" && n.push({ fixtureId: e.id, fixtureName: e.name, groupPath: t });
-    for (const r of e.children ?? []) {
-      const i = e.id ? [...t, e.name] : t;
-      n.push(...this._flattenFixtures(r, i));
+    e.type === "component" && n.push({ fixtureId: e.id, fixtureName: e.name, groupPath: t, background: ((r = e.component) == null ? void 0 : r.background) ?? "light" });
+    for (const i of e.children ?? []) {
+      const o = e.id ? [...t, e.name] : t;
+      n.push(...this._flattenFixtures(i, o));
     }
     return n;
   }
@@ -1820,7 +1821,7 @@ class Ts {
     });
   }
 }
-class un {
+class fn {
   constructor(e) {
     this._run = e, this._changes = [], this._map = /* @__PURE__ */ new Map(), this._updateCounter = 0;
   }
@@ -1846,49 +1847,49 @@ class un {
   handleChange(e, t) {
   }
 }
-function f() {
+function u() {
   return ge.instance;
 }
-function fn() {
+function pn() {
   return me.instance;
 }
-function pn() {
-  return _e.instance;
+function gn() {
+  return ve.instance;
 }
-f.const = fn;
-f.obs = pn;
+u.const = pn;
+u.obs = gn;
 class ge {
   create(e) {
-    const t = N((n) => e(n));
+    const t = F((n) => e(n));
     return { read: (n) => t };
   }
 }
 ge.instance = new ge();
 class me {
   create(e) {
-    const t = N((n) => e(n));
+    const t = F((n) => e(n));
     return { read: (n) => t.read(n) };
   }
 }
 me.instance = new me();
-class _e {
+class ve {
   create(e) {
-    const t = N((n) => {
+    const t = F((n) => {
       const r = e(n);
-      return gn(r) ? r.read(n) : r;
+      return mn(r) ? r.read(n) : r;
     });
     return { read: (n) => t };
   }
 }
-_e.instance = new _e();
-function gn(s) {
+ve.instance = new ve();
+function mn(s) {
   return typeof s == "object" && s !== null && "read" in s;
 }
-function K(s, e) {
+function Z(s, e) {
   return Object.fromEntries(Object.entries(s).map(([t, n]) => [t, e(n, t)]));
 }
 const de = Symbol("ViewModelContext");
-class mn {
+class vn {
   constructor(e) {
     this._store = new Y(), this.props = e;
   }
@@ -1897,34 +1898,34 @@ class mn {
   }
 }
 function _n(s) {
-  return s[de] || (s[de] = Ke(void 0)), s[de];
+  return s[de] || (s[de] = Je(void 0)), s[de];
 }
-function M(s = {}) {
+function z(s = {}) {
   var e;
-  return e = class extends mn {
+  return e = class extends vn {
   }, e._props = s, e;
 }
-let ve = 0;
-const vn = new un((s) => {
+let _e = 0;
+const bn = new fn((s) => {
   for (const e of s)
     e.rendered = !1;
-  if (ve > 0) {
+  if (_e > 0) {
     const e = s.find((t) => t.isRendering);
     e.itemsToRender = s;
   } else
-    Je(() => {
+    Ze(() => {
       for (const e of s)
         e.rendered || e.forceUpdate();
     });
 });
-let bn = 0;
-class yn {
+let yn = 0;
+class xn {
   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 = () => {
-      Je(() => {
+      Ze(() => {
         for (const n of this.itemsToRender)
           n.rendered || n.forceUpdate();
       }), this.itemsToRender = [];
@@ -1934,38 +1935,38 @@ class yn {
     return this.debugName;
   }
   updateProps(e) {
-    this._obsProps ? this._obsProps.set(e, void 0) : (this._obsProps = y(this, e), this._render = this.renderFactory(this._obsProps, () => this.contextValues), this.rendering = N(this, this._render), this._disposable = vn.addDependency(this.rendering, this));
+    this._obsProps ? this._obsProps.set(e, void 0) : (this._obsProps = x(this, e), this._render = this.renderFactory(this._obsProps, () => this.contextValues), this.rendering = F(this, this._render), this._disposable = bn.addDependency(this.rendering, this));
   }
 }
-function Te(s, e, t) {
-  const n = (o) => o + 1, r = () => new yn(s + ++bn, e), i = function(o) {
-    const d = Ot(n, 0)[1], c = Tt(r)[0];
+function Re(s, e, t) {
+  const n = (o) => o + 1, r = () => new xn(s + ++yn, e), i = function(o) {
+    const d = Ot(n, 0)[1], c = Rt(r)[0];
     for (const h of t ?? [])
-      c.contextValues.set(h, Rt(h));
+      c.contextValues.set(h, Tt(h));
     if (De(c.cleanupEffect, []), De(c.handleAfterRender), c.isRendering)
       throw new Error("Component is already rendering");
-    c.isRendering = !0, ve++;
+    c.isRendering = !0, _e++;
     try {
       c.forceUpdate = d, c.updateProps(o);
       const h = c.rendering.get();
       return c.rendered = !0, h;
     } finally {
-      c.isRendering = !1, ve--;
+      c.isRendering = !1, _e--;
     }
   };
   return i.displayName = s, i;
 }
-Te("ObsView", (s) => (e) => s.read(e).children(e));
-function D(s, e) {
-  return Te("view", (t) => {
-    const n = K(s, (r, i) => r.create((o) => t.read(o)[i], void 0));
+Re("ObsView", (s) => (e) => s.read(e).children(e));
+function k(s, e) {
+  return Re("view", (t) => {
+    const n = Z(s, (r, i) => r.create((o) => t.read(o)[i], void 0));
     return (r) => {
-      const i = K(n, (o) => o.read(r));
+      const i = Z(n, (o) => o.read(r));
       return e(r, i);
     };
   });
 }
-function xn(s) {
+function Cn(s) {
   const e = [];
   for (const t of Object.values(s)) {
     const n = t._requiredContext;
@@ -1973,22 +1974,22 @@ function xn(s) {
   }
   return e;
 }
-function B(s, e, t) {
-  const n = typeof e == "function" ? {} : e, r = typeof e == "function" ? e : t, i = "_props" in s ? s._props : {}, o = xn({ ...i, ...n }), d = _n(s), c = [...o, d];
-  return Te("viewWithModel", (h, m) => {
-    const v = m(), p = v.get(d), _ = "_props" in s ? K(s._props, (C, z) => C.create((H) => h.read(H)[z], v.get(C._requiredContext))) : {}, E = p ? { read: () => p, dispose: () => {
-    } } : Jt((C) => {
-      const z = K(_, (H) => H.read(C));
-      return new s(z);
-    }), R = K(n, (C, z) => C.create((H) => h.read(H)[z], v.get(C._requiredContext)));
-    return (C) => {
-      const z = E.read(C), H = K(R, (Ct) => Ct.read(C));
-      return r(C, z, H);
+function $(s, e, t) {
+  const n = typeof e == "function" ? {} : e, r = typeof e == "function" ? e : t, i = "_props" in s ? s._props : {}, o = Cn({ ...i, ...n }), d = _n(s), c = [...o, d];
+  return Re("viewWithModel", (h, m) => {
+    const _ = m(), g = _.get(d), v = "_props" in s ? Z(s._props, (S, H) => S.create((L) => h.read(L)[H], _.get(S._requiredContext))) : {}, E = g ? { read: () => g, dispose: () => {
+    } } : Jt((S) => {
+      const H = Z(v, (L) => L.read(S));
+      return new s(H);
+    }), V = Z(n, (S, H) => S.create((L) => h.read(L)[H], _.get(S._requiredContext)));
+    return (S) => {
+      const H = E.read(S), L = Z(V, (Ct) => Ct.read(S));
+      return r(S, H, L);
     };
   }, c.length > 0 ? c : void 0);
 }
-D({ value: f.obs() }, (s, e) => e.value.read(s));
-Ke(null);
+k({ value: u.obs() }, (s, e) => e.value.read(s));
+Je(null);
 function ht(s) {
   var e;
   return {
@@ -1999,7 +2000,7 @@ function ht(s) {
     component: s.component
   };
 }
-function ee(s, e) {
+function te(s, e) {
   const {
     storageKey: t,
     defaultValue: n,
@@ -2012,7 +2013,7 @@ function ee(s, e) {
     h !== null && (o = i(h));
   } catch {
   }
-  const d = y(s, o), c = d.set.bind(d);
+  const d = x(s, o), c = d.set.bind(d);
   return d.set = (h, m) => {
     try {
       localStorage.setItem(t, r(h));
@@ -2021,48 +2022,52 @@ function ee(s, e) {
     c(h, m);
   }, d;
 }
-class Cn extends M({
-  registry: f.const(),
-  daemonModel: f.const()
+class Sn extends z({
+  registry: u.const(),
+  daemonModel: u.const(),
+  reportModel: u.const()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "leftSidebarVisible", ee(this, {
+    l(this, "leftSidebarVisible", te(this, {
       storageKey: "component-explorer:leftSidebarVisible",
       defaultValue: !0
     }));
-    l(this, "rightSidebarVisible", ee(this, {
+    l(this, "rightSidebarVisible", te(this, {
       storageKey: "component-explorer:rightSidebarVisible",
-      defaultValue: !0
+      defaultValue: !1
     }));
-    l(this, "isDarkTheme", ee(this, {
+    l(this, "isDarkTheme", te(this, {
       storageKey: "component-explorer:isDarkTheme",
       defaultValue: !0
     }));
-    l(this, "selectedNodeId", ee(this, {
+    l(this, "selectedNodeId", te(this, {
       storageKey: "component-explorer:selectedNodeId",
       defaultValue: void 0
     }));
-    l(this, "expandedNodeIds", y(this, /* @__PURE__ */ new Set()));
-    l(this, "viewMode", ee(this, {
+    l(this, "expandedNodeIds", x(this, /* @__PURE__ */ new Set([""])));
+    l(this, "viewMode", te(this, {
       storageKey: "component-explorer:viewMode",
       defaultValue: "session"
     }));
-    /** The explorer's tree derived from the registry */
-    l(this, "tree", N(this, (t) => {
-      const n = this.props.registry.root.read(t);
-      return ht(n);
+    /** The explorer's tree derived from the registry or report */
+    l(this, "tree", F(this, (t) => {
+      const n = this.props.reportModel;
+      if (n)
+        return n.buildTree(t);
+      const r = this.props.registry.root.read(t);
+      return ht(r);
     }));
-    l(this, "selectedNode", N(this, (t) => {
+    l(this, "selectedNode", F(this, (t) => {
       const n = this.selectedNodeId.read(t);
-      if (!n) return;
+      if (n === void 0) return;
       const r = this.tree.read(t);
-      return this._findNode(r.children ?? [], n);
+      return r.id === n ? r : this._findNode(r.children ?? [], n);
     }));
     /** List of preview rows to render based on current selection and view mode */
-    l(this, "selectedFixtures", N(this, (t) => {
+    l(this, "selectedFixtures", F(this, (t) => {
       const n = this.selectedNode.read(t);
-      return n ? this.viewMode.read(t) === "diff" && this.daemonAvailable ? this._collectDiffRows(n, n.name) : this._collectPreviewRows(n, n.name) : [];
+      return n ? this.isReportMode ? (this.props.reportModel.state.read(t), this._collectReportRows(n, n.name)) : this.viewMode.read(t) === "diff" && this.daemonAvailable ? this._collectDiffRows(n, n.name) : this._collectPreviewRows(n, n.name) : [];
     }));
     l(this, "setViewMode", (t) => {
       this.viewMode.set(t, void 0);
@@ -2096,6 +2101,12 @@ class Cn extends M({
   get daemon() {
     return this.props.daemonModel;
   }
+  get reportModel() {
+    return this.props.reportModel;
+  }
+  get isReportMode() {
+    return this.props.reportModel !== void 0;
+  }
   isNodeExpanded(t, n) {
     return this.expandedNodeIds.read(n).has(t);
   }
@@ -2183,8 +2194,34 @@ class Cn extends M({
     }
     return r;
   }
+  _collectReportRows(t, n) {
+    const r = this.props.reportModel.state.get();
+    if (r.status !== "ready") return [];
+    const i = r.report.fixtures;
+    if (t.type === "component") {
+      const d = i[t.id];
+      return d ? [{
+        type: "report-comparison",
+        id: t.id,
+        name: t.name,
+        path: n,
+        items: [{
+          fixtureId: t.id,
+          name: t.name,
+          path: n,
+          entry: d
+        }]
+      }] : [];
+    }
+    const o = [];
+    for (const d of t.children ?? []) {
+      const c = n ? `${n} / ${d.name}` : d.name;
+      o.push(...this._collectReportRows(d, c));
+    }
+    return o;
+  }
 }
-const u = {
+const p = {
   container: {
     display: "flex",
     flexDirection: "row",
@@ -2373,15 +2410,15 @@ const u = {
     cursor: "pointer"
   }
 };
-function Re(...s) {
+function Te(...s) {
   return Object.assign({}, ...s.filter(Boolean));
 }
-class wn extends M({
-  active: f()
+class wn extends z({
+  active: u()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "isHovered", y(this, !1));
+    l(this, "isHovered", x(this, !1));
     l(this, "setHovered", (t) => {
       this.isHovered.set(t, void 0);
     });
@@ -2390,18 +2427,18 @@ class wn extends M({
     return this.props.active;
   }
 }
-const ce = B(
+const ce = $(
   wn,
   {
-    onClick: f.const(),
-    title: f.const(),
-    children: f.const()
+    onClick: u.const(),
+    title: u.const(),
+    children: u.const()
   },
   (s, e, t) => {
-    const n = e.isHovered.read(s), r = e.active.read(s), i = Re(
-      u.titleBarButton,
-      n && !r && u.titleBarButtonHover,
-      r && u.titleBarButtonActive
+    const n = e.isHovered.read(s), r = e.active.read(s), i = Te(
+      p.titleBarButton,
+      n && !r && p.titleBarButtonHover,
+      r && p.titleBarButtonActive
     );
     return /* @__PURE__ */ a(
       "button",
@@ -2415,20 +2452,20 @@ const ce = B(
       }
     );
   }
-), Sn = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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" }) }), In = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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)" }) }), On = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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" }) }), Tn = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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" }) }), Rn = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm11 11H6V3h7v10zM3 3h2v10H3V3z" }) }), Vn = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm6 11V3h5v10H8zM3 3h4v10H3V3z" }) }), kn = () => /* @__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" }) }), Nn = () => /* @__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" }) }), Dn = D(
-  { model: f.const() },
+), In = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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" }) }), On = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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)" }) }), Rn = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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" }) }), Tn = ({ style: s }) => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: s, 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" }) }), kn = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm11 11H6V3h7v10zM3 3h2v10H3V3z" }) }), Vn = () => /* @__PURE__ */ a("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ a("path", { d: "M2 2v12h12V2H2zm6 11V3h5v10H8zM3 3h4v10H3V3z" }) }), Nn = () => /* @__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" }) }), Dn = () => /* @__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" }) }), Mn = k(
+  { model: u.const() },
   (s, e) => {
     var d, c;
     const t = e.model, n = t.viewMode.read(s), r = ((d = t.daemon) == null ? void 0 : d.sessions.read(s)) ?? [], i = (c = t.daemon) == null ? void 0 : c.sessionName, o = r.filter((h) => h.name !== i);
-    return /* @__PURE__ */ g("div", { style: J.container, children: [
-      /* @__PURE__ */ g("div", { style: J.segmentedControl, children: [
-        /* @__PURE__ */ a($e, { label: "Live", mode: "session", active: n === "session", onClick: () => t.setViewMode("session") }),
-        /* @__PURE__ */ a($e, { label: "Diff", mode: "diff", active: n === "diff", onClick: () => t.setViewMode("diff") })
+    return /* @__PURE__ */ f("div", { style: X.container, children: [
+      /* @__PURE__ */ f("div", { style: X.segmentedControl, children: [
+        /* @__PURE__ */ a(Le, { label: "Live", mode: "session", active: n === "session", onClick: () => t.setViewMode("session") }),
+        /* @__PURE__ */ a(Le, { label: "Diff", mode: "diff", active: n === "diff", onClick: () => t.setViewMode("diff") })
       ] }),
-      o.length > 0 && /* @__PURE__ */ a("div", { style: J.sessionLinks, children: o.map((h) => /* @__PURE__ */ g(
+      o.length > 0 && /* @__PURE__ */ a("div", { style: X.sessionLinks, children: o.map((h) => /* @__PURE__ */ f(
         "button",
         {
-          style: J.sessionLink,
+          style: X.sessionLink,
           onClick: () => t.navigateToSession(h.name),
           title: `Switch to ${h.name} session`,
           children: [
@@ -2441,48 +2478,48 @@ const ce = B(
     ] });
   }
 );
-function $e({ label: s, mode: e, active: t, onClick: n }) {
+function Le({ label: s, mode: e, active: t, onClick: n }) {
   return /* @__PURE__ */ a(
     "button",
     {
-      style: t ? J.segmentActive : J.segment,
+      style: t ? X.segmentActive : X.segment,
       onClick: n,
       children: s
     }
   );
 }
-const En = D(
+const Fn = k(
   {
-    model: f.const()
+    model: u.const()
   },
   (s, e) => {
     const t = e.model, n = t.leftSidebarVisible.read(s), r = t.rightSidebarVisible.read(s), i = t.isDarkTheme.read(s), o = t.selectedNode.read(s);
-    return /* @__PURE__ */ g("div", { style: u.titleBar, children: [
-      /* @__PURE__ */ a("div", { style: u.titleBarSection, children: /* @__PURE__ */ a(
+    return /* @__PURE__ */ f("div", { style: p.titleBar, children: [
+      /* @__PURE__ */ a("div", { style: p.titleBarSection, children: /* @__PURE__ */ a(
         ce,
         {
           active: n,
           onClick: t.toggleLeftSidebar,
           title: "Toggle left sidebar",
-          children: /* @__PURE__ */ a(Rn, {})
+          children: /* @__PURE__ */ a(kn, {})
         }
       ) }),
-      /* @__PURE__ */ g("div", { style: u.titleBarCenter, children: [
-        t.daemonAvailable && /* @__PURE__ */ a(Dn, { model: t }),
-        o ? /* @__PURE__ */ g(ye, { children: [
+      /* @__PURE__ */ f("div", { style: p.titleBarCenter, children: [
+        t.isReportMode ? /* @__PURE__ */ a("span", { style: { fontSize: 12, color: "var(--vscode-descriptionForeground)" }, children: "Screenshot Report" }) : t.daemonAvailable ? /* @__PURE__ */ a(Mn, { model: t }) : null,
+        o ? /* @__PURE__ */ f(ye, { children: [
           /* @__PURE__ */ a("span", { style: { color: "var(--vscode-textLink-foreground)" }, children: "<" }),
           /* @__PURE__ */ a("span", { children: o.name }),
           /* @__PURE__ */ a("span", { style: { color: "var(--vscode-textLink-foreground)" }, children: "/>" })
         ] }) : /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: "No component selected" })
       ] }),
-      /* @__PURE__ */ g("div", { style: u.titleBarSection, children: [
+      /* @__PURE__ */ f("div", { style: p.titleBarSection, children: [
         /* @__PURE__ */ a(
           ce,
           {
             active: !1,
             onClick: t.toggleTheme,
             title: i ? "Switch to light theme" : "Switch to dark theme",
-            children: i ? /* @__PURE__ */ a(kn, {}) : /* @__PURE__ */ a(Nn, {})
+            children: i ? /* @__PURE__ */ a(Nn, {}) : /* @__PURE__ */ a(Dn, {})
           }
         ),
         /* @__PURE__ */ a(
@@ -2497,7 +2534,7 @@ const En = D(
       ] })
     ] });
   }
-), J = {
+), X = {
   container: {
     display: "flex",
     alignItems: "center",
@@ -2541,22 +2578,22 @@ const En = D(
     color: "var(--vscode-textLink-foreground)",
     cursor: "pointer"
   }
-}, ut = D(
+}, ut = k(
   {
-    model: f.const(),
-    nodes: f.const(),
-    depth: f.const()
+    model: u.const(),
+    nodes: u.const(),
+    depth: u.const()
   },
   (s, e) => /* @__PURE__ */ a(ye, { children: e.nodes.map((t) => /* @__PURE__ */ a(An, { model: e.model, node: t, depth: e.depth }, t.id)) })
 );
-class Fn extends M({
-  model: f.const(),
-  node: f.const(),
-  depth: f.const()
+class En extends z({
+  model: u.const(),
+  node: u.const(),
+  depth: u.const()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "isHovered", y(this, !1));
+    l(this, "isHovered", x(this, !1));
     l(this, "setHovered", (t) => {
       this.isHovered.set(t, void 0);
     });
@@ -2584,15 +2621,15 @@ class Fn extends M({
     return !!(this.props.node.children && this.props.node.children.length > 0);
   }
 }
-const An = B(Fn, {}, (s, e) => {
-  const t = e.explorerModel, n = e.treeNode, r = e.treeDepth, i = !!(n.children && n.children.length > 0), o = i ? t.isNodeExpanded(n.id, s) : !1, c = t.selectedNodeId.read(s) === n.id, h = e.isHovered.read(s), m = Re(
-    u.treeItem,
+const An = $(En, {}, (s, e) => {
+  const t = e.explorerModel, n = e.treeNode, r = e.treeDepth, i = !!(n.children && n.children.length > 0), o = i ? t.isNodeExpanded(n.id, s) : !1, c = t.selectedNodeId.read(s) === n.id, h = e.isHovered.read(s), m = Te(
+    p.treeItem,
     { paddingLeft: `${8 + r * 12}px` },
-    c && u.treeItemSelected,
-    !c && h && u.treeItemHover
+    c && p.treeItemSelected,
+    !c && h && p.treeItemHover
   );
-  return /* @__PURE__ */ g(ye, { children: [
-    /* @__PURE__ */ g(
+  return /* @__PURE__ */ f(ye, { children: [
+    /* @__PURE__ */ f(
       "div",
       {
         style: m,
@@ -2601,37 +2638,37 @@ const An = B(Fn, {}, (s, e) => {
         onMouseEnter: () => e.setHovered(!0),
         onMouseLeave: () => e.setHovered(!1),
         children: [
-          i ? /* @__PURE__ */ a("div", { style: u.treeItemChevron, onClick: e.handleChevronClick, children: o ? /* @__PURE__ */ a(In, {}) : /* @__PURE__ */ a(Sn, {}) }) : /* @__PURE__ */ a("div", { style: u.treeItemChevronPlaceholder }),
-          /* @__PURE__ */ a("div", { style: u.treeItemIcon, children: n.type === "folder" ? /* @__PURE__ */ a(Tn, { style: { color: "var(--vscode-symbolIcon-folderForeground)" } }) : /* @__PURE__ */ a(On, { style: { color: "#deb45b" } }) }),
-          /* @__PURE__ */ a("span", { style: u.treeItemLabel, children: n.name }),
-          i && /* @__PURE__ */ a("span", { style: u.treeItemCount, children: n.children.length })
+          i ? /* @__PURE__ */ a("div", { style: p.treeItemChevron, onClick: e.handleChevronClick, children: o ? /* @__PURE__ */ a(On, {}) : /* @__PURE__ */ a(In, {}) }) : /* @__PURE__ */ a("div", { style: p.treeItemChevronPlaceholder }),
+          /* @__PURE__ */ a("div", { style: p.treeItemIcon, children: n.type === "folder" ? /* @__PURE__ */ a(Tn, { style: { color: "var(--vscode-symbolIcon-folderForeground)" } }) : /* @__PURE__ */ a(Rn, { style: { color: "#deb45b" } }) }),
+          /* @__PURE__ */ a("span", { style: p.treeItemLabel, children: n.name }),
+          i && /* @__PURE__ */ a("span", { style: p.treeItemCount, children: n.children.length })
         ]
       }
     ),
     i && o && /* @__PURE__ */ a(ut, { model: t, nodes: n.children, depth: r + 1 })
   ] });
-}), Mn = D(
+}), Bn = k(
   {
-    model: f.const()
+    model: u.const()
   },
   (s, e) => {
     const t = e.model.tree.read(s);
-    return /* @__PURE__ */ g("div", { style: u.sidebar, children: [
-      /* @__PURE__ */ a("div", { style: u.sidebarHeader, children: "Explorer" }),
-      /* @__PURE__ */ a("div", { style: u.sidebarContent, children: /* @__PURE__ */ a(ut, { model: e.model, nodes: t.children ?? [], depth: 0 }) })
+    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(ut, { model: e.model, nodes: [t], depth: 0 }) })
     ] });
   }
 );
-class Bn extends M({}) {
+class zn extends z({}) {
   constructor() {
     super(...arguments);
-    l(this, "checked", y(this, !1));
+    l(this, "checked", x(this, !1));
     l(this, "toggle", () => {
       this.checked.set(!this.checked.get(), void 0);
     });
   }
 }
-const zn = B(Bn, {}, (s, e) => {
+const $n = $(zn, {}, (s, e) => {
   const t = e.checked.read(s), n = {
     position: "relative",
     width: "36px",
@@ -2652,13 +2689,13 @@ const zn = B(Bn, {}, (s, e) => {
     transition: "left 0.2s"
   };
   return /* @__PURE__ */ a("div", { style: n, onClick: e.toggle, children: /* @__PURE__ */ a("div", { style: r }) });
-}), Hn = D(
+}), Hn = k(
   {
-    node: f.const()
+    node: u.const()
   },
-  (s, 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__ */ g("div", { style: u.propertiesPanel, children: [
-    /* @__PURE__ */ g("div", { style: u.propertyRow, children: [
-      /* @__PURE__ */ g("div", { style: u.propertyLabel, children: [
+  (s, 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: [
         "children",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : string" })
       ] }),
@@ -2666,62 +2703,62 @@ const zn = B(Bn, {}, (s, e) => {
         "input",
         {
           type: "text",
-          style: u.propertyInput,
+          style: p.propertyInput,
           defaultValue: "Click me",
           placeholder: "Enter text..."
         }
       ),
-      /* @__PURE__ */ a("div", { style: u.propertyDescription, children: "Button text content" })
+      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Button text content" })
     ] }),
-    /* @__PURE__ */ g("div", { style: u.propertyRow, children: [
-      /* @__PURE__ */ g("div", { style: u.propertyLabel, children: [
+    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
+      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
         "variant",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : select" })
       ] }),
-      /* @__PURE__ */ g("select", { style: u.propertySelect, defaultValue: "default", children: [
+      /* @__PURE__ */ f("select", { style: p.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: u.propertyDescription, children: "Visual style variant" })
+      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Visual style variant" })
     ] }),
-    /* @__PURE__ */ g("div", { style: u.propertyRow, children: [
-      /* @__PURE__ */ g("div", { style: u.propertyLabel, children: [
+    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
+      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
         "size",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : select" })
       ] }),
-      /* @__PURE__ */ g("select", { style: u.propertySelect, defaultValue: "default", children: [
+      /* @__PURE__ */ f("select", { style: p.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: u.propertyDescription, children: "Button size" })
+      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Button size" })
     ] }),
-    /* @__PURE__ */ g("div", { style: u.propertyRow, children: [
-      /* @__PURE__ */ g("div", { style: u.propertyLabel, children: [
+    /* @__PURE__ */ f("div", { style: p.propertyRow, children: [
+      /* @__PURE__ */ f("div", { style: p.propertyLabel, children: [
         "disabled",
         /* @__PURE__ */ a("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : boolean" })
       ] }),
-      /* @__PURE__ */ a(zn, {}),
-      /* @__PURE__ */ a("div", { style: u.propertyDescription, children: "Disable the button" })
+      /* @__PURE__ */ a($n, {}),
+      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Disable the button" })
     ] })
   ] })
-), Ln = D(
+), Ln = k(
   {
-    selectedNode: f.const()
+    selectedNode: u.const()
   },
-  (s, e) => /* @__PURE__ */ g("div", { style: Re(u.sidebar, u.sidebarRight), children: [
-    /* @__PURE__ */ g("div", { style: u.sidebarHeader, children: [
+  (s, e) => /* @__PURE__ */ f("div", { style: Te(p.sidebar, p.sidebarRight), children: [
+    /* @__PURE__ */ f("div", { style: p.sidebarHeader, children: [
       /* @__PURE__ */ a("span", { style: { marginRight: "6px", color: "var(--vscode-textLink-foreground)" }, children: "</>" }),
       "Props"
     ] }),
-    /* @__PURE__ */ a("div", { style: u.sidebarContent, children: e.selectedNode ? /* @__PURE__ */ a(Hn, { 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: p.sidebarContent, children: e.selectedNode ? /* @__PURE__ */ a(Hn, { node: e.selectedNode }) : /* @__PURE__ */ a("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component to view its properties" }) })
   ] })
 );
-class $n extends M({
-  fixture: f.const(),
-  compact: f.const()
+class Un extends z({
+  fixture: u.const(),
+  compact: u.const()
 }) {
   constructor() {
     super(...arguments);
@@ -2730,8 +2767,8 @@ class $n extends M({
     l(this, "_renderContainer", null);
     l(this, "_disposable", null);
     l(this, "_resizeObserver", null);
-    l(this, "measuredWidth", y(this, void 0));
-    l(this, "measuredHeight", y(this, void 0));
+    l(this, "measuredWidth", x(this, void 0));
+    l(this, "measuredHeight", x(this, void 0));
     l(this, "setContainerRef", (t) => {
       if (t === this._containerRef || (this._cleanup(), this._containerRef = t, !t)) return;
       const n = this.fixture.component;
@@ -2794,33 +2831,33 @@ class $n extends M({
     this._cleanup();
   }
 }
-const ft = B(
-  $n,
+const ft = $(
+  Un,
   {},
   (s, e) => {
     const t = e.fixture, n = t.component, r = n.displayMode, i = e.measuredWidth.read(s), o = e.measuredHeight.read(s), d = e.compact;
     let c;
     if (r.type === "page") {
-      const p = r.viewports[0], _ = Nt(p);
+      const g = r.viewports[0], v = Nt(g);
       c = {
-        width: _.width,
-        height: _.height,
+        width: v.width,
+        height: v.height,
         overflow: "auto"
       };
     } else
       c = {
         display: "inline-block"
       };
-    const h = i && o ? `${i} × ${o}` : "", m = d ? q.wrapperCompact : q.wrapper, v = d ? q.nameCompact : q.name;
-    return /* @__PURE__ */ g("div", { style: m, children: [
-      /* @__PURE__ */ g("div", { style: q.labelRow, children: [
-        /* @__PURE__ */ a("span", { style: v, children: t.name }),
-        !d && h && /* @__PURE__ */ a("span", { style: q.dimensions, children: h })
+    const h = i && o ? `${i} × ${o}` : "", m = d ? K.wrapperCompact : K.wrapper, _ = d ? K.nameCompact : K.name;
+    return /* @__PURE__ */ f("div", { style: m, children: [
+      /* @__PURE__ */ f("div", { style: K.labelRow, children: [
+        /* @__PURE__ */ a("span", { style: _, children: t.name }),
+        !d && h && /* @__PURE__ */ a("span", { style: K.dimensions, children: h })
       ] }),
-      /* @__PURE__ */ a("div", { style: Gn(n.background), children: /* @__PURE__ */ a("div", { ref: e.setContainerRef, style: c }) })
+      /* @__PURE__ */ a("div", { style: Wn(n.background), children: /* @__PURE__ */ a("div", { ref: e.setContainerRef, style: c }) })
     ] });
   }
-), W = 8;
+), q = 8;
 function pt(s, e) {
   return `
     linear-gradient(45deg, ${e} 25%, transparent 25%),
@@ -2832,26 +2869,26 @@ function pt(s, e) {
 const jn = {
   backgroundColor: "#ffffff",
   backgroundImage: pt("#ffffff", "#e5e5e5")
-}, Un = {
+}, Pn = {
   backgroundColor: "#1e1e1e",
   backgroundImage: pt("#1e1e1e", "#2d2d2d")
-}, Pn = {
+}, Gn = {
   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`,
+  backgroundSize: `${q * 2}px ${q * 2}px`,
+  backgroundPosition: `0 0, 0 ${q}px, ${q}px -${q}px, -${q}px 0`,
   boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)"
 };
-function Gn(s) {
-  const e = s === "dark" ? Un : jn;
+function Wn(s) {
+  const e = s === "dark" ? Pn : jn;
   return {
-    ...Pn,
+    ...Gn,
     backgroundColor: e.backgroundColor,
     backgroundImage: e.backgroundImage
   };
 }
-const q = {
+const K = {
   wrapper: {
     marginBottom: "32px"
   },
@@ -2880,16 +2917,16 @@ const q = {
     fontFamily: "var(--vscode-editor-font-family, monospace)"
   }
 };
-class Wn extends M({
-  fixtureId: f.const(),
-  sessionName: f.const(),
-  daemon: f.const()
+class qn extends z({
+  fixtureId: u.const(),
+  sessionName: u.const(),
+  daemon: u.const()
 }) {
   constructor(t) {
     super(t);
-    l(this, "screenshot", y(this, { status: "idle" }));
+    l(this, "screenshot", x(this, { status: "idle" }));
     l(this, "_fetchVersion", 0);
-    this._store.add(st((n) => {
+    this._store.add(rt((n) => {
       this.props.daemon.sourceTreeIds.read(n).get(this.props.sessionName) && this._fetchScreenshot();
     }));
   }
@@ -2907,26 +2944,26 @@ class Wn extends M({
     }
   }
 }
-const je = B(
-  Wn,
+const Ue = $(
+  qn,
   {},
   (s, e) => {
     const t = e.screenshot.read(s);
     if (t.status === "idle" || t.status === "loading")
-      return /* @__PURE__ */ a("div", { style: $.placeholder, children: /* @__PURE__ */ a("div", { style: $.shimmer }) });
+      return /* @__PURE__ */ a("div", { style: U.placeholder, children: /* @__PURE__ */ a("div", { style: U.shimmer }) });
     if (t.status === "error")
-      return /* @__PURE__ */ a("div", { style: $.error, children: /* @__PURE__ */ a("span", { style: $.errorText, children: "Screenshot failed" }) });
+      return /* @__PURE__ */ a("div", { style: U.error, children: /* @__PURE__ */ a("span", { style: U.errorText, children: "Screenshot failed" }) });
     const { data: n } = t;
     return n.image ? /* @__PURE__ */ a(
       "img",
       {
         src: `data:image/png;base64,${n.image}`,
-        style: $.image,
+        style: U.image,
         alt: `Screenshot of ${e.fixtureId}`
       }
-    ) : /* @__PURE__ */ a("div", { style: $.placeholder, children: /* @__PURE__ */ a("span", { style: $.hashText, children: n.hash.slice(0, 12) }) });
+    ) : /* @__PURE__ */ a("div", { style: U.placeholder, children: /* @__PURE__ */ a("span", { style: U.hashText, children: n.hash.slice(0, 12) }) });
   }
-), $ = {
+), U = {
   placeholder: {
     minHeight: 80,
     display: "flex",
@@ -2969,16 +3006,16 @@ const je = B(
     border: "1px solid var(--vscode-panel-border)"
   }
 };
-class qn extends M({
-  fixtureId: f.const(),
-  daemon: f.const(),
-  baselineSession: f.const(),
-  currentSession: f.const()
+class Kn extends z({
+  fixtureId: u.const(),
+  daemon: u.const(),
+  baselineSession: u.const(),
+  currentSession: u.const()
 }) {
   constructor(t) {
     super(t);
-    l(this, "comparisonStatus", y(this, { status: "loading" }));
-    this._store.add(st((n) => {
+    l(this, "comparisonStatus", x(this, { status: "loading" }));
+    this._store.add(rt((n) => {
       const r = this.props.daemon.sourceTreeIds.read(n), i = r.get(this.props.baselineSession), o = r.get(this.props.currentSession);
       i && o && this._fetchComparison();
     }));
@@ -3009,21 +3046,21 @@ class qn extends M({
     }
   }
 }
-const Kn = B(
-  qn,
+const Jn = $(
+  Kn,
   {},
   (s, e) => {
-    const t = e.comparisonStatus.read(s), n = t.status === "loading" ? /* @__PURE__ */ a("span", { style: x.badgeLoading, children: "comparing..." }) : t.status === "error" ? /* @__PURE__ */ a("span", { style: x.badgeError, children: "error" }) : t.match ? /* @__PURE__ */ a("span", { style: x.badgeMatch, children: "✓ match" }) : /* @__PURE__ */ a("span", { style: x.badgeChanged, children: "● changed" });
-    return /* @__PURE__ */ g("div", { style: x.fixtureRow, children: [
-      /* @__PURE__ */ g("div", { style: x.fixtureLabel, children: [
-        /* @__PURE__ */ a("span", { style: x.fixtureName, children: e.fixtureId }),
+    const t = e.comparisonStatus.read(s), n = t.status === "loading" ? /* @__PURE__ */ a("span", { style: C.badgeLoading, children: "comparing..." }) : t.status === "error" ? /* @__PURE__ */ a("span", { style: C.badgeError, children: "error" }) : t.match ? /* @__PURE__ */ a("span", { style: C.badgeMatch, children: "✓ match" }) : /* @__PURE__ */ a("span", { style: C.badgeChanged, children: "● changed" });
+    return /* @__PURE__ */ f("div", { style: C.fixtureRow, children: [
+      /* @__PURE__ */ f("div", { style: C.fixtureLabel, children: [
+        /* @__PURE__ */ a("span", { style: C.fixtureName, children: e.fixtureId }),
         n
       ] }),
-      /* @__PURE__ */ g("div", { style: x.sideBySide, children: [
-        /* @__PURE__ */ g("div", { style: x.screenshotColumn, children: [
-          /* @__PURE__ */ a("span", { style: x.columnLabel, children: "Current" }),
+      /* @__PURE__ */ f("div", { style: C.sideBySide, children: [
+        /* @__PURE__ */ f("div", { style: C.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: C.columnLabel, children: "Current" }),
           /* @__PURE__ */ a(
-            je,
+            Ue,
             {
               fixtureId: e.fixtureId,
               sessionName: e.currentSession,
@@ -3031,10 +3068,10 @@ const Kn = B(
             }
           )
         ] }),
-        /* @__PURE__ */ g("div", { style: x.screenshotColumn, children: [
-          /* @__PURE__ */ a("span", { style: x.columnLabel, children: "Baseline" }),
+        /* @__PURE__ */ f("div", { style: C.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: C.columnLabel, children: "Baseline" }),
           /* @__PURE__ */ a(
-            je,
+            Ue,
             {
               fixtureId: e.fixtureId,
               sessionName: e.baselineSession,
@@ -3045,19 +3082,19 @@ const Kn = B(
       ] })
     ] });
   }
-), Jn = D(
+), Zn = k(
   {
-    name: f.const(),
-    path: f.const(),
-    items: f.const(),
-    daemon: f.const(),
-    baselineSession: f.const(),
-    currentSession: f.const()
-  },
-  (s, e) => /* @__PURE__ */ g("div", { children: [
-    /* @__PURE__ */ a("div", { style: x.groupHeader, children: /* @__PURE__ */ a("span", { style: x.groupTitle, children: e.path }) }),
-    /* @__PURE__ */ a("div", { style: x.groupContent, children: e.items.map((t) => /* @__PURE__ */ a(
-      Kn,
+    name: u.const(),
+    path: u.const(),
+    items: u.const(),
+    daemon: u.const(),
+    baselineSession: u.const(),
+    currentSession: u.const()
+  },
+  (s, e) => /* @__PURE__ */ f("div", { children: [
+    /* @__PURE__ */ a("div", { style: C.groupHeader, children: /* @__PURE__ */ a("span", { style: C.groupTitle, children: e.path }) }),
+    /* @__PURE__ */ a("div", { style: C.groupContent, children: e.items.map((t) => /* @__PURE__ */ a(
+      Jn,
       {
         fixtureId: t.fixtureId,
         daemon: e.daemon,
@@ -3067,7 +3104,7 @@ const Kn = B(
       t.fixtureId
     )) })
   ] })
-), x = {
+), C = {
   groupHeader: {
     marginBottom: 12
   },
@@ -3135,35 +3172,201 @@ const Kn = B(
     color: "var(--vscode-errorForeground)",
     fontWeight: 500
   }
-}, gt = "component-explorer:fixtureHeights", Ue = 500;
-let V = null;
-function mt() {
-  if (V !== null) return V;
+}, J = 8;
+function gt(s, e) {
+  return `
+    linear-gradient(45deg, ${e} 25%, transparent 25%),
+    linear-gradient(-45deg, ${e} 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, ${e} 75%),
+    linear-gradient(-45deg, transparent 75%, ${e} 75%)
+  `;
+}
+const Xn = {
+  backgroundColor: "#ffffff",
+  backgroundImage: gt("#ffffff", "#e5e5e5")
+}, Qn = {
+  backgroundColor: "#1e1e1e",
+  backgroundImage: gt("#1e1e1e", "#2d2d2d")
+}, Yn = {
+  display: "inline-block",
+  padding: "12px",
+  borderRadius: "4px",
+  backgroundSize: `${J * 2}px ${J * 2}px`,
+  backgroundPosition: `0 0, 0 ${J}px, ${J}px -${J}px, -${J}px 0`,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)"
+};
+function es(s) {
+  const e = s === "dark" ? Qn : Xn;
+  return {
+    ...Yn,
+    backgroundColor: e.backgroundColor,
+    backgroundImage: e.backgroundImage
+  };
+}
+function je({ src: s, alt: e, background: t }) {
+  return /* @__PURE__ */ a("div", { style: es(t), children: /* @__PURE__ */ a("img", { src: s, alt: e, style: y.image }) });
+}
+const ts = k(
+  {
+    item: u.const(),
+    reportModel: u.const()
+  },
+  (s, e) => {
+    const { item: t, reportModel: n } = e, { entry: r } = t, i = r.background ?? "light", o = r.status === "unchanged" ? /* @__PURE__ */ a("span", { style: y.badgeMatch, children: "✓ match" }) : r.status === "changed" ? /* @__PURE__ */ a("span", { style: y.badgeChanged, children: "● changed" }) : /* @__PURE__ */ a("span", { style: y.badgeAdded, children: "+ added" }), d = r.baselineScreenshot || r.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 }),
+        o
+      ] }),
+      d && /* @__PURE__ */ f("div", { style: y.sideBySide, children: [
+        r.baselineScreenshot && /* @__PURE__ */ f("div", { style: y.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: y.columnLabel, children: "Baseline" }),
+          /* @__PURE__ */ a(
+            je,
+            {
+              src: n.resolveScreenshotUrl(r.baselineScreenshot),
+              alt: `Baseline screenshot of ${t.fixtureId}`,
+              background: i
+            }
+          )
+        ] }),
+        r.currentScreenshot && /* @__PURE__ */ f("div", { style: y.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: y.columnLabel, children: "Current" }),
+          /* @__PURE__ */ a(
+            je,
+            {
+              src: n.resolveScreenshotUrl(r.currentScreenshot),
+              alt: `Current screenshot of ${t.fixtureId}`,
+              background: i
+            }
+          )
+        ] })
+      ] }),
+      !d && r.status === "unchanged" && /* @__PURE__ */ a("div", { style: y.hashRow, children: /* @__PURE__ */ f("span", { style: y.hashText, children: [
+        "hash: ",
+        r.targetHash
+      ] }) })
+    ] });
+  }
+), ns = k(
+  {
+    name: u.const(),
+    path: u.const(),
+    items: u.const(),
+    reportModel: u.const()
+  },
+  (s, 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(
+      ts,
+      {
+        item: t,
+        reportModel: e.reportModel
+      },
+      t.fixtureId
+    )) })
+  ] })
+), y = {
+  groupHeader: {
+    marginBottom: 12
+  },
+  groupTitle: {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "var(--vscode-foreground)"
+  },
+  groupContent: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 24
+  },
+  fixtureRow: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  fixtureLabel: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  fixtureName: {
+    fontSize: 12,
+    fontWeight: 500,
+    color: "var(--vscode-foreground)"
+  },
+  sideBySide: {
+    display: "flex",
+    flexDirection: "row",
+    gap: 16
+  },
+  screenshotColumn: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  columnLabel: {
+    fontSize: 11,
+    fontWeight: 500,
+    color: "var(--vscode-descriptionForeground)",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  image: {
+    display: "block"
+  },
+  hashRow: {
+    padding: "8px 0"
+  },
+  hashText: {
+    fontSize: 11,
+    color: "var(--vscode-descriptionForeground)",
+    fontFamily: "monospace"
+  },
+  badgeMatch: {
+    fontSize: 11,
+    color: "var(--vscode-testing-iconPassed)",
+    fontWeight: 500
+  },
+  badgeChanged: {
+    fontSize: 11,
+    color: "var(--vscode-testing-iconFailed)",
+    fontWeight: 500
+  },
+  badgeAdded: {
+    fontSize: 11,
+    color: "var(--vscode-testing-iconQueued)",
+    fontWeight: 500
+  }
+}, mt = "component-explorer:fixtureHeights", Pe = 500;
+let D = null;
+function vt() {
+  if (D !== null) return D;
   try {
-    const s = localStorage.getItem(gt);
+    const s = localStorage.getItem(mt);
     if (s)
-      return V = JSON.parse(s), V;
+      return D = JSON.parse(s), D;
   } catch {
   }
-  return V = {}, V;
+  return D = {}, D;
 }
-function Zn() {
-  if (V !== null)
+function ss() {
+  if (D !== null)
     try {
-      const s = Object.entries(V);
-      s.length > Ue && (V = Object.fromEntries(s.slice(-Ue))), localStorage.setItem(gt, JSON.stringify(V));
+      const s = Object.entries(D);
+      s.length > Pe && (D = Object.fromEntries(s.slice(-Pe))), localStorage.setItem(mt, JSON.stringify(D));
     } catch {
     }
 }
-function Xn(s, e) {
-  const t = mt();
-  t[s] = e, Zn();
+function rs(s, e) {
+  const t = vt();
+  t[s] = e, ss();
 }
-function Yn() {
-  return new Map(Object.entries(mt()));
+function is() {
+  return new Map(Object.entries(vt()));
 }
-const Qn = 280, es = 32, oe = 32, Pe = 400, _t = "component-explorer:scrollAnchors", Ge = 100;
-function vt() {
+const os = 280, as = 32, ae = 32, Ge = 400, _t = "component-explorer:scrollAnchors", We = 100;
+function bt() {
   try {
     const s = localStorage.getItem(_t);
     if (s) return JSON.parse(s);
@@ -3171,36 +3374,36 @@ function vt() {
   }
   return {};
 }
-function ts(s, e) {
+function ds(s, e) {
   try {
-    const t = vt();
+    const t = bt();
     t[s] = e;
-    const n = Object.entries(t), r = n.length > Ge ? Object.fromEntries(n.slice(-Ge)) : t;
+    const n = Object.entries(t), r = n.length > We ? Object.fromEntries(n.slice(-We)) : t;
     localStorage.setItem(_t, JSON.stringify(r));
   } catch {
   }
 }
-function ns(s) {
-  return vt()[s];
+function cs(s) {
+  return bt()[s];
 }
-function bt(s) {
+function yt(s) {
   return s.type === "single" ? s.fixture.id : s.id;
 }
-function ss(s, e) {
+function ls(s, e) {
   const t = new Array(s.length);
-  let n = oe;
+  let n = ae;
   for (let r = 0; r < s.length; r++) {
-    const i = e.get(bt(s[r])) ?? Qn;
-    t[r] = { top: n, height: i }, n += i + es;
+    const i = e.get(yt(s[r])) ?? os;
+    t[r] = { top: n, height: i }, n += i + as;
   }
   return t;
 }
-function rs(s) {
+function hs(s) {
   if (s.length === 0) return 0;
   const e = s[s.length - 1];
-  return e.top + e.height + oe;
+  return e.top + e.height + ae;
 }
-function yt(s, e) {
+function xt(s, e) {
   let t = 0, n = s.length;
   for (; t < n; ) {
     const r = t + n >> 1;
@@ -3208,47 +3411,47 @@ function yt(s, e) {
   }
   return t;
 }
-function is(s, e, t) {
+function us(s, e, t) {
   if (s.length === 0) return { start: 0, end: 0 };
-  const n = yt(s, e - Pe);
+  const n = xt(s, e - Ge);
   let r = n;
-  const i = e + t + Pe;
+  const i = e + t + Ge;
   for (; r < s.length && s[r].top < i; )
     r++;
   return { start: n, end: r };
 }
-function We(s, e) {
+function qe(s, e) {
   if (s.length === 0) return;
-  const t = yt(s, e), n = Math.min(t, s.length - 1);
+  const t = xt(s, e), n = Math.min(t, s.length - 1);
   return {
     rowIndex: n,
     offsetFromViewport: s[n].top - e
   };
 }
-function qe(s, e) {
+function Ke(s, e) {
   return e.rowIndex >= s.length ? 0 : s[e.rowIndex].top - e.offsetFromViewport;
 }
-class os extends M({
-  model: f.const()
+class fs extends z({
+  model: u.const()
 }) {
   constructor() {
     super(...arguments);
-    l(this, "_rowHeights", y(this, Yn()));
-    l(this, "_scrollTop", y(this, 0));
-    l(this, "_viewportHeight", y(this, 0));
+    l(this, "_rowHeights", x(this, is()));
+    l(this, "_scrollTop", x(this, 0));
+    l(this, "_viewportHeight", x(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", F(this, (t) => {
       const n = this.explorerModel.selectedFixtures.read(t), r = this._rowHeights.read(t);
-      return ss(n, r);
+      return ls(n, r);
     }));
-    l(this, "visibleRowRange", N(this, (t) => {
+    l(this, "visibleRowRange", F(this, (t) => {
       const n = this.layout.read(t), r = this._scrollTop.read(t), i = this._viewportHeight.read(t);
-      return is(n, r, i);
+      return us(n, r, i);
     }));
     l(this, "setScrollContainerRef", (t) => {
       var n;
@@ -3259,8 +3462,8 @@ class os extends M({
     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 = We(t, this._scrollTop.get());
-        n && ts(this._currentNodeId, n);
+        const t = this.layout.get(), n = qe(t, this._scrollTop.get());
+        n && ds(this._currentNodeId, n);
       }, 150)));
     });
     l(this, "observeRowElement", (t, n) => {
@@ -3271,12 +3474,12 @@ class os extends M({
           const c = d.target.getAttribute("data-row-id");
           if (!c) continue;
           const h = Math.round(d.contentRect.height);
-          h > 0 && i.get(c) !== h && (o || (o = new Map(i)), o.set(c, h), Xn(c, h));
+          h > 0 && i.get(c) !== h && (o || (o = new Map(i)), o.set(c, h), rs(c, h));
         }
         if (o) {
-          const d = this.layout.get(), c = We(d, this._scrollTop.get());
+          const d = this.layout.get(), c = qe(d, this._scrollTop.get());
           if (this._rowHeights.set(o, void 0), c && this._scrollContainerRef) {
-            const h = this.layout.get(), m = qe(h, c);
+            const h = this.layout.get(), m = Ke(h, c);
             this._suppressScrollHandler = !0, this._scrollContainerRef.scrollTop = m, this._scrollTop.set(m, void 0), requestAnimationFrame(() => {
               this._suppressScrollHandler = !1;
             });
@@ -3293,9 +3496,9 @@ class os extends M({
   }
   _restoreScrollPosition() {
     if (!this._scrollContainerRef || !this._currentNodeId) return;
-    const t = ns(this._currentNodeId);
+    const t = cs(this._currentNodeId);
     if (!t) return;
-    const n = this.layout.get(), r = qe(n, t);
+    const n = this.layout.get(), r = Ke(n, t);
     this._suppressScrollHandler = !0, this._scrollContainerRef.scrollTop = r, this._scrollTop.set(r, void 0), requestAnimationFrame(() => {
       this._suppressScrollHandler = !1;
     });
@@ -3305,23 +3508,35 @@ class os extends M({
     (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 as = B(
-  os,
+const ps = $(
+  fs,
   {},
   (s, e) => {
     const t = e.explorerModel.selectedFixtures.read(s), n = e.explorerModel.selectedNodeId.read(s), r = e.layout.read(s), { start: i, end: o } = e.visibleRowRange.read(s);
-    if (e.updateForSelection(n), t.length === 0)
-      return /* @__PURE__ */ a("div", { style: Z.emptyState, children: /* @__PURE__ */ a("span", { style: Z.emptyText, children: "Select a component or folder to preview" }) });
-    const d = rs(r);
-    return /* @__PURE__ */ a("div", { ref: e.setScrollContainerRef, style: Z.scrollContainer, children: /* @__PURE__ */ a("div", { style: { position: "relative", height: d }, children: t.slice(i, o).map((c, h) => {
-      const m = i + h, { top: v } = r[m], p = bt(c);
+    if (e.updateForSelection(n), t.length === 0) {
+      const c = e.explorerModel.reportModel;
+      if (c) {
+        const h = c.state.read(s);
+        if (h.status === "loading")
+          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: N.emptyState, children: /* @__PURE__ */ f("span", { style: { ...N.emptyText, color: "var(--vscode-errorForeground)" }, children: [
+            "Failed to load report: ",
+            h.message
+          ] }) });
+      }
+      return /* @__PURE__ */ a("div", { style: N.emptyState, children: /* @__PURE__ */ a("span", { style: N.emptyText, children: "Select a component or folder to preview" }) });
+    }
+    const d = hs(r);
+    return /* @__PURE__ */ a("div", { ref: e.setScrollContainerRef, style: N.scrollContainer, children: /* @__PURE__ */ a("div", { style: { position: "relative", height: d }, children: t.slice(i, o).map((c, h) => {
+      const m = i + h, { top: _ } = r[m], g = yt(c);
       return /* @__PURE__ */ a(
         "div",
         {
-          ref: (_) => e.observeRowElement(_, p),
-          style: { position: "absolute", top: v, left: oe, right: oe },
-          children: c.type === "single" ? /* @__PURE__ */ a(ft, { fixture: c.fixture, compact: !1 }) : c.type === "variants" ? /* @__PURE__ */ a(ds, { row: c }) : c.type === "screenshot-comparison" && e.explorerModel.daemon ? /* @__PURE__ */ a(
-            Jn,
+          ref: (v) => e.observeRowElement(v, g),
+          style: { position: "absolute", top: _, left: ae, right: ae },
+          children: c.type === "single" ? /* @__PURE__ */ a(ft, { fixture: c.fixture, compact: !1 }) : c.type === "variants" ? /* @__PURE__ */ a(gs, { row: c }) : c.type === "screenshot-comparison" && e.explorerModel.daemon ? /* @__PURE__ */ a(
+            Zn,
             {
               name: c.name,
               path: c.path,
@@ -3330,22 +3545,30 @@ const as = B(
               baselineSession: "baseline",
               currentSession: "current"
             }
+          ) : c.type === "report-comparison" && e.explorerModel.reportModel ? /* @__PURE__ */ a(
+            ns,
+            {
+              name: c.name,
+              path: c.path,
+              items: c.items,
+              reportModel: e.explorerModel.reportModel
+            }
           ) : null
         },
-        p
+        g
       );
     }) }) });
   }
-), ds = D(
-  { row: f.const() },
+), gs = k(
+  { row: u.const() },
   (s, e) => {
     const t = e.row;
-    return /* @__PURE__ */ g("div", { children: [
-      /* @__PURE__ */ a("div", { style: Z.variantsHeader, children: /* @__PURE__ */ a("span", { style: Z.variantsTitle, children: t.path }) }),
-      /* @__PURE__ */ a("div", { style: Z.variantsContent, children: t.fixtures.map((n) => /* @__PURE__ */ a(ft, { fixture: n, compact: !0 }, n.id)) })
+    return /* @__PURE__ */ f("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(ft, { fixture: n, compact: !0 }, n.id)) })
     ] });
   }
-), Z = {
+), N = {
   scrollContainer: {
     flex: 1,
     overflow: "auto",
@@ -3376,67 +3599,22 @@ const as = B(
     flexWrap: "wrap",
     gap: "16px"
   }
-}, xt = B(
-  Cn,
-  { daemonModel: f.const() },
+}, ms = $(
+  Sn,
+  { daemonModel: u.const(), reportModel: u.const() },
   (s, e) => {
     const t = e.leftSidebarVisible.read(s), n = e.rightSidebarVisible.read(s), r = e.isDarkTheme.read(s), i = e.selectedNode.read(s);
-    return /* @__PURE__ */ g("div", { className: r ? "vscode-theme default-dark-plus" : "vscode-theme default-light-plus", style: u.container, children: [
-      t && /* @__PURE__ */ a(Mn, { model: e }),
-      /* @__PURE__ */ g("div", { style: u.centerArea, children: [
-        /* @__PURE__ */ a(En, { model: e }),
-        /* @__PURE__ */ a(as, { model: e })
+    return /* @__PURE__ */ f("div", { className: r ? "vscode-theme default-dark-plus" : "vscode-theme default-light-plus", style: p.container, children: [
+      t && /* @__PURE__ */ a(Bn, { model: e }),
+      /* @__PURE__ */ f("div", { style: p.centerArea, children: [
+        /* @__PURE__ */ a(Fn, { model: e }),
+        /* @__PURE__ */ a(ps, { model: e })
       ] }),
       n && /* @__PURE__ */ a(Ln, { selectedNode: i })
     ] });
   }
 );
-function cs() {
-  const s = new lt();
-  return s.register("components/Button.fixture.tsx", ae({
-    Primary: L({
-      render: (e) => (e.innerHTML = "<button>Primary Button</button>", { dispose: () => {
-        e.innerHTML = "";
-      } })
-    }),
-    Icon: L({
-      render: (e) => (e.innerHTML = "<button>🔔 Icon Button</button>", { dispose: () => {
-        e.innerHTML = "";
-      } })
-    })
-  })), s.register("components/Input.fixture.tsx", ae({
-    Text: L({
-      render: (e) => (e.innerHTML = '<input type="text" placeholder="Text Input" />', { dispose: () => {
-        e.innerHTML = "";
-      } })
-    }),
-    Search: L({
-      render: (e) => (e.innerHTML = '<input type="search" placeholder="Search..." />', { dispose: () => {
-        e.innerHTML = "";
-      } })
-    })
-  })), s.register("components/Card.fixture.tsx", L({
-    render: (e) => (e.innerHTML = '<div style="border: 1px solid #ccc; padding: 16px;">Basic Card</div>', { dispose: () => {
-      e.innerHTML = "";
-    } })
-  })), s.register("components/Feedback.fixture.tsx", ae({
-    Badge: L({
-      render: (e) => (e.innerHTML = '<span style="background: blue; color: white; padding: 2px 8px; border-radius: 4px;">Badge</span>', { dispose: () => {
-        e.innerHTML = "";
-      } })
-    }),
-    Alert: L({
-      render: (e) => (e.innerHTML = '<div style="background: #ffffcc; padding: 8px; border: 1px solid #cc0;">Alert message</div>', { dispose: () => {
-        e.innerHTML = "";
-      } })
-    })
-  })), s;
-}
-function Rs() {
-  const s = cs();
-  return /* @__PURE__ */ a(xt, { registry: s, daemonModel: void 0 });
-}
-var ls = class be {
+var vs = class be {
   constructor(e) {
     this.iterator = e;
   }
@@ -3449,11 +3627,11 @@ var ls = class be {
   [Symbol.asyncIterator]() {
     return this.iterator;
   }
-}, hs = class extends Error {
+}, _s = class extends Error {
   constructor(s, e, t) {
     super(t), this.statusCode = s, this.method = e, this.name = "ApiError";
   }
-}, us = class {
+}, bs = class {
   constructor(s) {
     l(this, "methods", this._createProxy(""));
     this._request = s;
@@ -3466,8 +3644,8 @@ var ls = class be {
     });
   }
 };
-function fs(s, e) {
-  return new us(async (t, n) => {
+function ys(s, e) {
+  return new bs(async (t, n) => {
     var d;
     const r = await fetch(`${s}/${t}`, {
       method: "POST",
@@ -3480,37 +3658,37 @@ function fs(s, e) {
     if (r.status !== 200) {
       const c = await r.json().catch(() => null);
       let h;
-      throw c && typeof c == "object" && "errorMessage" in c ? h = `${c.errorMessage}` : h = `Error calling API method ${t}: ${JSON.stringify(c)} (Status: ${r.status}, Status Text: ${r.statusText})`, new hs(r.status, t, h);
+      throw c && typeof c == "object" && "errorMessage" in c ? h = `${c.errorMessage}` : h = `Error calling API method ${t}: ${JSON.stringify(c)} (Status: ${r.status}, Status Text: ${r.statusText})`, new _s(r.status, t, h);
     }
     const i = r.headers.get("Content-Type");
-    return i != null && i.startsWith("application/jsonl") ? ls.fromFn(async function* () {
-      var p;
-      const c = (p = r.body) == null ? void 0 : p.getReader();
+    return i != null && i.startsWith("application/jsonl") ? vs.fromFn(async function* () {
+      var g;
+      const c = (g = r.body) == null ? void 0 : g.getReader();
       if (!c)
         return;
       let h = "";
       const m = new TextDecoder("utf-8");
       for (; ; ) {
-        const { done: _, value: E } = await c.read();
-        if (_)
+        const { done: v, value: E } = await c.read();
+        if (v)
           break;
         h += m.decode(E, { stream: !0 });
-        let R;
-        for (; (R = h.indexOf(`
+        let V;
+        for (; (V = h.indexOf(`
 `)) >= 0; ) {
-          const C = h.slice(0, R).trim();
-          h = h.slice(R + 1), C.length > 0 && (yield JSON.parse(C));
+          const S = h.slice(0, V).trim();
+          h = h.slice(V + 1), S.length > 0 && (yield JSON.parse(S));
         }
       }
-      const v = h.trim();
-      v.length > 0 && (yield JSON.parse(v));
+      const _ = h.trim();
+      _.length > 0 && (yield JSON.parse(_));
     }) : await r.json();
   });
 }
-class ps {
+class xs {
   constructor(e) {
-    l(this, "_sourceTreeIds", y(this, /* @__PURE__ */ new Map()));
-    l(this, "_sessions", y(this, []));
+    l(this, "_sourceTreeIds", x(this, /* @__PURE__ */ new Map()));
+    l(this, "_sessions", x(this, []));
     l(this, "_screenshotCache", /* @__PURE__ */ new Map());
     l(this, "_client");
     l(this, "_eventStreamAbort", null);
@@ -3519,7 +3697,7 @@ class ps {
     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 = fs("/__explorer/daemon-api");
+    this.config = e, this.sessionName = e.sessionName, this._client = ys("/__explorer/daemon-api");
   }
   /**
    * Initializes the model: fetches initial session info and starts listening to events.
@@ -3617,21 +3795,81 @@ class ps {
     }
   }
 }
-function gs() {
+function Cs() {
   return window.__EXPLORER_DAEMON__;
 }
-class Vs {
+class Ss {
+  constructor(e) {
+    l(this, "state", x(this, { status: "loading" }));
+    l(this, "_baseUrl");
+    this.reportUrl = e;
+    const t = e.lastIndexOf("/");
+    this._baseUrl = t >= 0 ? e.slice(0, t + 1) : "", this._fetch();
+  }
+  resolveScreenshotUrl(e) {
+    return this._baseUrl + e;
+  }
+  buildTree(e) {
+    const t = this.state.read(e);
+    return t.status !== "ready" ? { id: "", name: "Report", type: "folder", children: [] } : ws(t.report.fixtures);
+  }
+  async _fetch() {
+    this.state.set({ status: "loading" }, void 0);
+    try {
+      const e = await fetch(this.reportUrl);
+      if (!e.ok)
+        throw new Error(`HTTP ${e.status}: ${e.statusText}`);
+      const t = await e.json();
+      this.state.set({ status: "ready", report: t }, void 0);
+    } catch (e) {
+      this.state.set({ status: "error", message: String(e) }, void 0);
+    }
+  }
+}
+function ws(s) {
+  const e = { id: "", name: "Components", type: "folder", children: [] };
+  for (const [t, n] of Object.entries(s)) {
+    const r = t.split("/");
+    let i = e;
+    for (let o = 0; o < r.length; o++) {
+      const d = r[o], c = o === r.length - 1, h = r.slice(0, o + 1).join("/");
+      if (c)
+        i.children.push({
+          id: h,
+          name: d,
+          type: "component",
+          reportEntry: n
+        });
+      else {
+        let m = i.children.find((_) => _.type === "folder" && _.name === d);
+        m || (m = { id: h, name: d, type: "folder", children: [] }, i.children.push(m)), i = m;
+      }
+    }
+  }
+  return e;
+}
+class Bs {
   constructor(e, t) {
     l(this, "_root");
-    l(this, "_registry", new lt());
+    l(this, "_registry", new un());
     l(this, "_daemonModel");
-    this._populateRegistry(t), this._daemonModel = this._initializeDaemonModel(), this._root = It(e), this._root.render(Vt(xt, { registry: this._registry, daemonModel: this._daemonModel }));
+    l(this, "_reportModel");
+    this._populateRegistry(t), this._reportModel = this._initializeReportModel(), this._daemonModel = this._reportModel ? void 0 : this._initializeDaemonModel(), this._root = It(e), this._root.render(kt(ms, {
+      registry: this._registry,
+      daemonModel: this._daemonModel,
+      reportModel: this._reportModel
+    }));
+  }
+  _initializeReportModel() {
+    const t = new URLSearchParams(location.search).get("report");
+    if (t)
+      return new Ss(t);
   }
   _initializeDaemonModel() {
-    const e = gs();
+    const e = Cs();
     if (!e)
       return;
-    const t = new ps(e);
+    const t = new xs(e);
     return t.initialize().catch((n) => {
       console.error("[ExplorerApp] Failed to initialize DaemonModel:", n);
     }), t;
@@ -3664,50 +3902,50 @@ class Vs {
   }
 }
 export {
-  In as ChevronDownIcon,
-  Sn as ChevronRightIcon,
-  Ts as CliRuntime,
-  On as ComponentIcon,
-  ps as DaemonModel,
-  xt as Explorer,
-  Vs as ExplorerApp,
-  Cn as ExplorerModel,
-  Rs as ExplorerWithDefaults,
-  lt as FixtureRegistry,
+  On as ChevronDownIcon,
+  In as ChevronRightIcon,
+  As as CliRuntime,
+  Rn as ComponentIcon,
+  xs as DaemonModel,
+  ms as Explorer,
+  Bs as ExplorerApp,
+  Sn as ExplorerModel,
+  un as FixtureRegistry,
   Tn as FolderIcon,
-  Mn as LeftSidebar,
-  Nn as MoonIcon,
-  Rn as PanelLeftIcon,
+  Bn as LeftSidebar,
+  Dn as MoonIcon,
+  kn as PanelLeftIcon,
   Vn as PanelRightIcon,
+  Ss as ReportModel,
   Ln as RightSidebar,
-  kn as SunIcon,
-  En as TitleBar,
+  Nn as SunIcon,
+  Fn as TitleBar,
   ce as TitleBarButton,
   An as TreeItem,
   ut as TreeView,
-  kt as VIEWPORT_SIZES,
+  Vt as VIEWPORT_SIZES,
   Ft as collectComponents,
-  Ee as createComponentDefinition,
+  Me as createComponentDefinition,
   le as createFixtureTree,
-  L as defineFixture,
-  ae as defineFixtureGroup,
-  Ds as defineFixtureVariants,
+  Hs as defineFixture,
+  Ls as defineFixtureGroup,
+  Us as defineFixtureVariants,
   Fe as findNodeByPath,
-  Ve as fixtureGroupBrand,
-  ke as fixtureVariantsBrand,
+  ke as fixtureGroupBrand,
+  Ve as fixtureVariantsBrand,
   Dt as getDefaultPropertyValues,
-  Os as isComponentDefinition,
+  Es as isComponentDefinition,
   Ce as isFixtureGroup,
-  we as isFixtureVariants,
+  Se as isFixtureVariants,
   xe as isSingleFixture,
-  Re as mergeStyles,
-  Cs as parseFixtureExport,
-  Ss as parseFixtureGroup,
-  Is as parseFixtureVariants,
-  ws as parseSingleFixture,
+  Te as mergeStyles,
+  Ns as parseFixtureExport,
+  Ms as parseFixtureGroup,
+  Fs as parseFixtureVariants,
+  Ds as parseSingleFixture,
   Nt as resolveViewport,
   Ne as singleFixtureBrand,
-  u as styles,
+  p as styles,
   ht as toExplorerTree
 };
 //# sourceMappingURL=viewer.js.map