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

package/dist/viewer.js

@@ -0,0 +1,3951 @@
+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 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 && ke in s && s[ke] === !0 && "_entries" in s && typeof s._entries == "object";
+}
+function Se(s) {
+  return typeof s == "object" && s !== null && Ve in s && s[Ve] === !0 && "_variants" in s && typeof s._variants == "object";
+}
+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 Ds(s) {
+  return xe(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a SingleFixtureExport" };
+}
+function Ms(s) {
+  return Ce(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a FixtureGroupExport" };
+}
+function Fs(s) {
+  return Se(s) ? { success: !0, data: s } : { success: !1, error: "Value is not a FixtureVariantsExport" };
+}
+function Me(s, e, t) {
+  const n = s._options;
+  return {
+    id: e,
+    name: t,
+    description: n.description,
+    isolation: n.isolation ?? "shadow-dom",
+    displayMode: n.displayMode ?? { type: "component" },
+    styles: n.styles,
+    background: n.background ?? "light",
+    properties: n.properties ?? [],
+    render: n.render
+  };
+}
+function Es(s) {
+  return typeof s == "object" && s !== null && "render" in s && typeof s.render == "function" && "id" in s && "name" in s;
+}
+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, ...Vt[s] } : s;
+}
+function Dt(s) {
+  const e = {};
+  for (const t of s)
+    e[t.name] = t.defaultValue;
+  return e;
+}
+function le(s) {
+  const e = {
+    id: "",
+    name: "Components",
+    type: "folder",
+    children: []
+  };
+  for (const [t, n] of s) {
+    const r = Mt(t);
+    Xe(e, [r], n);
+  }
+  return e;
+}
+function Mt(s) {
+  return (s.split("/").pop() ?? s).replace(/\.fixture\.(tsx?|jsx?)$/, "");
+}
+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: Me(t, r, i)
+    };
+    s.children || (s.children = []), s.children.push(o);
+  } else if (Ce(t)) {
+    const r = e[e.length - 1], i = e.join("/");
+    let o = (n = s.children) == null ? void 0 : n.find(
+      (d) => d.type === "folder" && d.name === r
+    );
+    o || (o = {
+      id: i,
+      name: r,
+      type: "folder",
+      children: []
+    }, s.children || (s.children = []), s.children.push(o));
+    for (const [d, c] of Object.entries(t._entries))
+      Xe(o, [...e, d], c);
+  } else if (Se(t)) {
+    const r = e[e.length - 1], o = {
+      id: e.join("/"),
+      name: r,
+      type: "variants",
+      children: []
+    };
+    s.children || (s.children = []), s.children.push(o);
+    for (const [d, c] of Object.entries(t._variants)) {
+      const m = [...e, d].join("/"), _ = {
+        id: m,
+        name: d,
+        type: "component",
+        component: Me(c, m, d)
+      };
+      o.children.push(_);
+    }
+  }
+}
+function Fe(s, e) {
+  if (e.length === 0)
+    return s;
+  let t = s;
+  for (const n of e) {
+    if (!t || !t.children)
+      return;
+    t = t.children.find((r) => r.name === n);
+  }
+  return t;
+}
+function Ft(s) {
+  if (s.type === "component" && s.component)
+    return [s.component];
+  const e = [];
+  for (const t of s.children ?? [])
+    e.push(...Ft(t));
+  return e;
+}
+let j;
+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 Et(s) {
+  he = s;
+}
+function At(s) {
+  he && he(s);
+}
+class Ee {
+  constructor(e) {
+    this.loggers = e;
+  }
+  handleObservableCreated(e, t) {
+    for (const n of this.loggers)
+      n.handleObservableCreated(e, t);
+  }
+  handleOnListenerCountChanged(e, t) {
+    for (const n of this.loggers)
+      n.handleOnListenerCountChanged(e, t);
+  }
+  handleObservableUpdated(e, t) {
+    for (const n of this.loggers)
+      n.handleObservableUpdated(e, t);
+  }
+  handleAutorunCreated(e, t) {
+    for (const n of this.loggers)
+      n.handleAutorunCreated(e, t);
+  }
+  handleAutorunDisposed(e) {
+    for (const t of this.loggers)
+      t.handleAutorunDisposed(e);
+  }
+  handleAutorunDependencyChanged(e, t, n) {
+    for (const r of this.loggers)
+      r.handleAutorunDependencyChanged(e, t, n);
+  }
+  handleAutorunStarted(e) {
+    for (const t of this.loggers)
+      t.handleAutorunStarted(e);
+  }
+  handleAutorunFinished(e) {
+    for (const t of this.loggers)
+      t.handleAutorunFinished(e);
+  }
+  handleDerivedDependencyChanged(e, t, n) {
+    for (const r of this.loggers)
+      r.handleDerivedDependencyChanged(e, t, n);
+  }
+  handleDerivedCleared(e) {
+    for (const t of this.loggers)
+      t.handleDerivedCleared(e);
+  }
+  handleBeginTransaction(e) {
+    for (const t of this.loggers)
+      t.handleBeginTransaction(e);
+  }
+  handleEndTransaction(e) {
+    for (const t of this.loggers)
+      t.handleEndTransaction(e);
+  }
+}
+var T;
+(function(s) {
+  let e = !1;
+  function t() {
+    e = !0;
+  }
+  s.enable = t;
+  function n() {
+    return r(1);
+  }
+  s.ofCaller = n;
+  function r(i) {
+    if (!e)
+      return;
+    const o = Error, d = o.stackTraceLimit;
+    o.stackTraceLimit = 3;
+    const c = new Error().stack;
+    return o.stackTraceLimit = d, we.fromStack(c, i + 1);
+  }
+  s.ofNthCaller = r;
+})(T || (T = {}));
+class we {
+  static fromStack(e, t) {
+    const n = e.split(`
+`), r = Bt(n[t + 1]);
+    if (r)
+      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;
+  }
+}
+function Bt(s) {
+  if (!s)
+    return;
+  const e = s.match(/\((.*):(\d+):(\d+)\)/);
+  if (e)
+    return {
+      fileName: e[1],
+      line: parseInt(e[2]),
+      column: parseInt(e[3]),
+      id: s
+    };
+  const t = s.match(/at ([^\(\)]*):(\d+):(\d+)/);
+  if (t)
+    return {
+      fileName: t[1],
+      line: parseInt(t[2]),
+      column: parseInt(t[3]),
+      id: s
+    };
+}
+class B {
+  constructor(e, t, n) {
+    this.owner = e, this.debugNameSource = t, this.referenceFn = n;
+  }
+  getDebugName(e) {
+    return zt(e, this);
+  }
+}
+const Ae = /* @__PURE__ */ new Map(), ue = /* @__PURE__ */ new WeakMap();
+function zt(s, e) {
+  const t = ue.get(s);
+  if (t)
+    return t;
+  const n = $t(s, e);
+  if (n) {
+    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 $t(s, e) {
+  const t = ue.get(s);
+  if (t)
+    return t;
+  const n = e.owner ? Lt(e.owner) + "." : "";
+  let r;
+  const i = e.debugNameSource;
+  if (i !== void 0)
+    if (typeof i == "function") {
+      if (r = i(), r !== void 0)
+        return n + r;
+    } else
+      return n + i;
+  const o = e.referenceFn;
+  if (o !== void 0 && (r = Ie(o), r !== void 0))
+    return n + r;
+  if (e.owner !== void 0) {
+    const d = Ht(e.owner, s);
+    if (d !== void 0)
+      return n + d;
+  }
+}
+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 Lt(s) {
+  const e = ze.get(s);
+  if (e)
+    return e;
+  const t = Ye(s) ?? "Object";
+  let n = Be.get(t) ?? 0;
+  n++, Be.set(t, n);
+  const r = n === 1 ? t : `${t}#${n}`;
+  return ze.set(s, r), r;
+}
+function Ye(s) {
+  const e = s.constructor;
+  if (e)
+    return e.name === "Object" ? void 0 : e.name;
+}
+function Ie(s) {
+  const e = s.toString(), n = /\/\*\*\s*@description\s*([^*]*)\*\//.exec(e), r = n ? n[1] : void 0;
+  return r == null ? void 0 : r.trim();
+}
+let fe;
+function Ut(s) {
+  fe = s;
+}
+let et;
+function jt(s) {
+  et = s;
+}
+let tt;
+function Pt(s) {
+  tt = s;
+}
+let nt;
+function Gt(s) {
+  nt = s;
+}
+class Wt {
+  get TChange() {
+    return null;
+  }
+  reportChanges() {
+    this.get();
+  }
+  /** @sealed */
+  read(e) {
+    return e ? e.readObservable(this) : this.get();
+  }
+  map(e, t, n = T.ofCaller()) {
+    const r = t === void 0 ? void 0 : e, i = t === void 0 ? e : t;
+    return fe({
+      owner: r,
+      debugName: () => {
+        const o = Ie(i);
+        if (o !== void 0)
+          return o;
+        const c = /^\s*\(?\s*([a-zA-Z_$][a-zA-Z_$0-9]*)\s*\)?\s*=>\s*\1(?:\??)\.([a-zA-Z_$][a-zA-Z_$0-9]*)\s*$/.exec(i.toString());
+        if (c)
+          return `${this.debugName}.${c[2]}`;
+        if (!r)
+          return `${this.debugName} (mapped)`;
+      },
+      debugReferenceFn: i
+    }, (o) => i(this.read(o), o), n);
+  }
+  /**
+   * @sealed
+   * Converts an observable of an observable value into a direct observable of the value.
+  */
+  flatten() {
+    return fe({
+      owner: void 0,
+      debugName: () => `${this.debugName} (flattened)`
+    }, (e) => this.read(e).read(e));
+  }
+  recomputeInitiallyAndOnChange(e, t) {
+    return e.add(et(this, t)), this;
+  }
+  /**
+   * Ensures that this observable is observed. This keeps the cache alive.
+   * However, in case of deriveds, it does not force eager evaluation (only when the value is read/get).
+   * Use `recomputeInitiallyAndOnChange` for eager evaluation.
+   */
+  keepObserved(e) {
+    return e.add(tt(this)), this;
+  }
+  get debugValue() {
+    return this.get();
+  }
+  debugGetDependencyGraph() {
+    return nt(this);
+  }
+}
+class Oe extends Wt {
+  constructor(e) {
+    var t;
+    super(), this._observers = /* @__PURE__ */ new Set(), (t = b()) == null || t.handleObservableCreated(this, e);
+  }
+  addObserver(e) {
+    var n;
+    const t = this._observers.size;
+    this._observers.add(e), t === 0 && this.onFirstObserverAdded(), t !== this._observers.size && ((n = b()) == null || n.handleOnListenerCountChanged(this, this._observers.size));
+  }
+  removeObserver(e) {
+    var n;
+    const t = this._observers.delete(e);
+    t && this._observers.size === 0 && this.onLastObserverRemoved(), t && ((n = b()) == null || n.handleOnListenerCountChanged(this, this._observers.size));
+  }
+  onFirstObserverAdded() {
+  }
+  onLastObserverRemoved() {
+  }
+  log() {
+    var t;
+    const e = !!b();
+    return At(this), e || (t = b()) == null || t.handleObservableCreated(this, T.ofCaller()), this;
+  }
+  debugGetObservers() {
+    return this._observers;
+  }
+}
+function st(s) {
+  return {
+    dispose: s
+  };
+}
+class O extends Error {
+  constructor(e) {
+    super(e || "An unexpected bug occurred."), Object.setPrototypeOf(this, O.prototype);
+  }
+}
+function se(s) {
+  throw s;
+}
+function pe(s) {
+  console.error("Unexpected error:", s);
+}
+const Q = (s, e) => s === e;
+function ee(s) {
+  return s != null;
+}
+class Y {
+  constructor() {
+    this.disposables = [], this._isDisposed = !1;
+  }
+  get isDisposed() {
+    return this._isDisposed;
+  }
+  dispose() {
+    this.clear(), this._isDisposed = !0;
+  }
+  add(e) {
+    return e && this.disposables.push(e), e;
+  }
+  remove(e) {
+    if (!e)
+      return e;
+    const t = this.disposables.indexOf(e);
+    return t !== -1 && this.disposables.splice(t, 1), e;
+  }
+  clear() {
+    for (const e of this.disposables)
+      e.dispose();
+    this.disposables = [];
+  }
+  leakItems() {
+    this.disposables = [];
+  }
+}
+function qt(s) {
+  switch (s) {
+    case 0:
+      return "initial";
+    case 1:
+      return "dependenciesMightHaveChanged";
+    case 2:
+      return "stale";
+    case 3:
+      return "upToDate";
+    default:
+      return "<unknown>";
+  }
+}
+class w extends Oe {
+  get debugName() {
+    return this._debugNameData.getDebugName(this) ?? "(anonymous)";
+  }
+  constructor(e, t, n, r = void 0, i, o) {
+    var d;
+    super(o), this._debugNameData = e, this._computeFn = t, this._changeTracker = n, this._handleLastObserverRemoved = r, this._equalityComparator = i, this._state = 0, this._value = void 0, this._updateCount = 0, this._dependencies = /* @__PURE__ */ new Set(), this._dependenciesToBeRemoved = /* @__PURE__ */ new Set(), this._changeSummary = void 0, this._isUpdating = !1, this._isComputing = !1, this._didReportChange = !1, this._isInBeforeUpdate = !1, this._isReaderValid = !1, this._store = void 0, this._delayedStore = void 0, this._removedObserverToCallEndUpdateOn = null, this._changeSummary = (d = this._changeTracker) == null ? void 0 : d.createChangeSummary(void 0);
+  }
+  onLastObserverRemoved() {
+    var e, t;
+    this._state = 0, this._value = void 0, (e = b()) == null || e.handleDerivedCleared(this);
+    for (const n of this._dependencies)
+      n.removeObserver(this);
+    this._dependencies.clear(), this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._delayedStore !== void 0 && (this._delayedStore.dispose(), this._delayedStore = void 0), (t = this._handleLastObserverRemoved) == null || t.call(this);
+  }
+  get() {
+    var t, n;
+    if (this._isComputing, this._observers.size === 0) {
+      let r;
+      try {
+        this._isReaderValid = !0;
+        let i;
+        this._changeTracker && (i = this._changeTracker.createChangeSummary(void 0), (n = (t = this._changeTracker).beforeUpdate) == null || n.call(t, this, i)), r = this._computeFn(this, i);
+      } finally {
+        this._isReaderValid = !1;
+      }
+      return this.onLastObserverRemoved(), r;
+    } else {
+      do {
+        if (this._state === 1) {
+          for (const r of this._dependencies)
+            if (r.reportChanges(), this._state === 2)
+              break;
+        }
+        this._state === 1 && (this._state = 3), this._state !== 3 && this._recompute();
+      } while (this._state !== 3);
+      return this._value;
+    }
+  }
+  _recompute() {
+    var n, r, i, o;
+    let e = !1;
+    this._isComputing = !0, this._didReportChange = !1;
+    const t = this._dependenciesToBeRemoved;
+    this._dependenciesToBeRemoved = this._dependencies, this._dependencies = t;
+    try {
+      const d = this._changeSummary;
+      this._isReaderValid = !0, this._changeTracker && (this._isInBeforeUpdate = !0, (r = (n = this._changeTracker).beforeUpdate) == null || r.call(n, this, d), this._isInBeforeUpdate = !1, this._changeSummary = (i = this._changeTracker) == null ? void 0 : i.createChangeSummary(d));
+      const c = this._state !== 0, h = this._value;
+      this._state = 3;
+      const m = this._delayedStore;
+      m !== void 0 && (this._delayedStore = void 0);
+      try {
+        this._store !== void 0 && (this._store.dispose(), this._store = void 0), this._value = this._computeFn(this, d);
+      } finally {
+        this._isReaderValid = !1;
+        for (const _ of this._dependenciesToBeRemoved)
+          _.removeObserver(this);
+        this._dependenciesToBeRemoved.clear(), m !== void 0 && m.dispose();
+      }
+      e = this._didReportChange || c && !this._equalityComparator(h, this._value), (o = b()) == null || o.handleObservableUpdated(this, {
+        oldValue: h,
+        newValue: this._value,
+        change: void 0,
+        didChange: e,
+        hadValue: c
+      });
+    } catch (d) {
+      se(d);
+    }
+    if (this._isComputing = !1, !this._didReportChange && e)
+      for (const d of this._observers)
+        d.handleChange(this, void 0);
+    else
+      this._didReportChange = !1;
+  }
+  toString() {
+    return `LazyDerived<${this.debugName}>`;
+  }
+  // IObserver Implementation
+  beginUpdate(e) {
+    if (this._isUpdating)
+      throw new O("Cyclic deriveds are not supported yet!");
+    this._updateCount++, this._isUpdating = !0;
+    try {
+      const t = this._updateCount === 1;
+      if (this._state === 3 && (this._state = 1, !t))
+        for (const n of this._observers)
+          n.handlePossibleChange(this);
+      if (t)
+        for (const n of this._observers)
+          n.beginUpdate(this);
+    } finally {
+      this._isUpdating = !1;
+    }
+  }
+  endUpdate(e) {
+    if (this._updateCount--, this._updateCount === 0) {
+      const t = [...this._observers];
+      for (const n of t)
+        n.endUpdate(this);
+      if (this._removedObserverToCallEndUpdateOn) {
+        const n = [...this._removedObserverToCallEndUpdateOn];
+        this._removedObserverToCallEndUpdateOn = null;
+        for (const r of n)
+          r.endUpdate(this);
+      }
+    }
+  }
+  handlePossibleChange(e) {
+    if (this._state === 3 && this._dependencies.has(e) && !this._dependenciesToBeRemoved.has(e)) {
+      this._state = 1;
+      for (const t of this._observers)
+        t.handlePossibleChange(this);
+    }
+  }
+  handleChange(e, t) {
+    var n;
+    if (this._dependencies.has(e) && !this._dependenciesToBeRemoved.has(e) || this._isInBeforeUpdate) {
+      (n = b()) == null || n.handleDerivedDependencyChanged(this, e, t);
+      let r = !1;
+      try {
+        r = this._changeTracker ? this._changeTracker.handleChange({
+          changedObservable: e,
+          change: t,
+          didChange: (o) => o === e
+        }, this._changeSummary) : !0;
+      } catch (o) {
+        se(o);
+      }
+      const i = this._state === 3;
+      if (r && (this._state === 1 || i) && (this._state = 2, i))
+        for (const o of this._observers)
+          o.handlePossibleChange(this);
+    }
+  }
+  // IReader Implementation
+  _ensureReaderValid() {
+    if (!this._isReaderValid)
+      throw new O("The reader object cannot be used outside its compute function!");
+  }
+  readObservable(e) {
+    this._ensureReaderValid(), e.addObserver(this);
+    const t = e.get();
+    return this._dependencies.add(e), this._dependenciesToBeRemoved.delete(e), t;
+  }
+  reportChange(e) {
+    this._ensureReaderValid(), this._didReportChange = !0;
+    for (const t of this._observers)
+      t.handleChange(this, e);
+  }
+  get store() {
+    return this._ensureReaderValid(), this._store === void 0 && (this._store = new Y()), this._store;
+  }
+  get delayedStore() {
+    return this._ensureReaderValid(), this._delayedStore === void 0 && (this._delayedStore = new Y()), this._delayedStore;
+  }
+  addObserver(e) {
+    const t = !this._observers.has(e) && this._updateCount > 0;
+    super.addObserver(e), t && (this._removedObserverToCallEndUpdateOn && this._removedObserverToCallEndUpdateOn.has(e) ? this._removedObserverToCallEndUpdateOn.delete(e) : e.beginUpdate(this));
+  }
+  removeObserver(e) {
+    this._observers.has(e) && this._updateCount > 0 && (this._removedObserverToCallEndUpdateOn || (this._removedObserverToCallEndUpdateOn = /* @__PURE__ */ new Set()), this._removedObserverToCallEndUpdateOn.add(e)), super.removeObserver(e);
+  }
+  debugGetState() {
+    return {
+      state: this._state,
+      stateStr: qt(this._state),
+      updateCount: this._updateCount,
+      isComputing: this._isComputing,
+      dependencies: this._dependencies,
+      value: this._value
+    };
+  }
+  debugSetValue(e) {
+    this._value = e;
+  }
+  debugRecompute() {
+    this._isComputing ? this._state = 2 : this._recompute();
+  }
+  setValue(e, t, n) {
+    this._value = e;
+    const r = this._observers;
+    t.updateObserver(this, this);
+    for (const i of r)
+      i.handleChange(this, n);
+  }
+}
+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 B(s.owner, s.debugName, s.debugReferenceFn), e, void 0, s.onLastObserverRemoved, s.equalsFn ?? Q, t);
+}
+Ut(Kt);
+function Jt(s, e, t = T.ofCaller()) {
+  let n, r;
+  n = s, r = void 0;
+  let i;
+  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);
+  }, Q, t);
+}
+function Zt(s) {
+  switch (s) {
+    case 1:
+      return "dependenciesMightHaveChanged";
+    case 2:
+      return "stale";
+    case 3:
+      return "upToDate";
+    default:
+      return "<unknown>";
+  }
+}
+class re {
+  get debugName() {
+    return this._debugNameData.getDebugName(this) ?? "(anonymous)";
+  }
+  constructor(e, t, n, r) {
+    var i, o;
+    this._debugNameData = e, this._runFn = t, this._changeTracker = n, this._state = 2, this._updateCount = 0, this._disposed = !1, this._dependencies = /* @__PURE__ */ new Set(), this._dependenciesToBeRemoved = /* @__PURE__ */ new Set(), this._isRunning = !1, this._store = void 0, this._delayedStore = void 0, this._changeSummary = (i = this._changeTracker) == null ? void 0 : i.createChangeSummary(void 0), (o = b()) == null || o.handleAutorunCreated(this, r), this._run();
+  }
+  dispose() {
+    var e;
+    if (!this._disposed) {
+      this._disposed = !0;
+      for (const t of this._dependencies)
+        t.removeObserver(this);
+      this._dependencies.clear(), this._store !== void 0 && this._store.dispose(), this._delayedStore !== void 0 && this._delayedStore.dispose(), (e = b()) == null || e.handleAutorunDisposed(this);
+    }
+  }
+  _run() {
+    var t, n, r, i;
+    const e = this._dependenciesToBeRemoved;
+    this._dependenciesToBeRemoved = this._dependencies, this._dependencies = e, this._state = 3;
+    try {
+      if (!this._disposed) {
+        (t = b()) == null || t.handleAutorunStarted(this);
+        const o = this._changeSummary, d = this._delayedStore;
+        d !== void 0 && (this._delayedStore = void 0);
+        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) {
+          se(c);
+        } finally {
+          this._isRunning = !1, d !== void 0 && d.dispose();
+        }
+      }
+    } finally {
+      this._disposed || (i = b()) == null || i.handleAutorunFinished(this);
+      for (const o of this._dependenciesToBeRemoved)
+        o.removeObserver(this);
+      this._dependenciesToBeRemoved.clear();
+    }
+  }
+  toString() {
+    return `Autorun<${this.debugName}>`;
+  }
+  // IObserver implementation
+  beginUpdate(e) {
+    this._state === 3 && (this._state = 1), this._updateCount++;
+  }
+  endUpdate(e) {
+    try {
+      if (this._updateCount === 1)
+        do {
+          if (this._state === 1) {
+            this._state = 3;
+            for (const t of this._dependencies)
+              if (t.reportChanges(), this._state === 2)
+                break;
+          }
+          this._state !== 3 && this._run();
+        } while (this._state !== 3);
+    } finally {
+      this._updateCount--;
+    }
+  }
+  handlePossibleChange(e) {
+    this._state === 3 && this._isDependency(e) && (this._state = 1);
+  }
+  handleChange(e, t) {
+    var n;
+    if (this._isDependency(e)) {
+      (n = b()) == null || n.handleAutorunDependencyChanged(this, e, t);
+      try {
+        (this._changeTracker ? this._changeTracker.handleChange({
+          changedObservable: e,
+          change: t,
+          didChange: (i) => i === e
+        }, this._changeSummary) : !0) && (this._state = 2);
+      } catch (r) {
+        se(r);
+      }
+    }
+  }
+  _isDependency(e) {
+    return this._dependencies.has(e) && !this._dependenciesToBeRemoved.has(e);
+  }
+  // IReader implementation
+  _ensureNoRunning() {
+    if (!this._isRunning)
+      throw new O("The reader object cannot be used outside its compute function!");
+  }
+  readObservable(e) {
+    if (this._ensureNoRunning(), this._disposed)
+      return e.get();
+    e.addObserver(this);
+    const t = e.get();
+    return this._dependencies.add(e), this._dependenciesToBeRemoved.delete(e), t;
+  }
+  get store() {
+    if (this._ensureNoRunning(), this._disposed)
+      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 O("Cannot access store after dispose");
+    return this._delayedStore === void 0 && (this._delayedStore = new Y()), this._delayedStore;
+  }
+  debugGetState() {
+    return {
+      isRunning: this._isRunning,
+      updateCount: this._updateCount,
+      dependencies: this._dependencies,
+      state: this._state,
+      stateStr: Zt(this._state)
+    };
+  }
+  debugRerun() {
+    this._isRunning ? this._state = 2 : this._run();
+  }
+}
+function rt(s, e = T.ofCaller()) {
+  return new re(new B(void 0, void 0, s), s, void 0, e);
+}
+function $e(s) {
+  const e = new Error("BugIndicatingErrorRecovery: " + s);
+  pe(e), console.error("recovered from an error that indicates a bug", e);
+}
+function it(s, e) {
+  const t = new ot(s, e);
+  try {
+    s(t);
+  } finally {
+    t.finish();
+  }
+}
+function Xt(s, e, t) {
+  s ? e(s) : it(e, t);
+}
+class ot {
+  constructor(e, t) {
+    var n;
+    this._fn = e, this._getDebugName = t, this._updatingObservers = [], (n = b()) == null || n.handleBeginTransaction(this);
+  }
+  getDebugName() {
+    return this._getDebugName ? this._getDebugName() : Ie(this._fn);
+  }
+  updateObserver(e, t) {
+    if (!this._updatingObservers) {
+      $e("Transaction already finished!"), it((n) => {
+        n.updateObserver(e, t);
+      });
+      return;
+    }
+    this._updatingObservers.push({ observer: e, observable: t }), e.beginUpdate(t);
+  }
+  finish() {
+    var t;
+    const e = this._updatingObservers;
+    if (!e) {
+      $e("transaction.finish() has already been called!");
+      return;
+    }
+    for (let n = 0; n < e.length; n++) {
+      const { observer: r, observable: i } = e[n];
+      r.endUpdate(i);
+    }
+    this._updatingObservers = null, (t = b()) == null || t.handleEndTransaction(this);
+  }
+  debugGetUpdatingObservers() {
+    return this._updatingObservers;
+  }
+}
+function x(s, e, t = T.ofCaller()) {
+  let n;
+  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 ie extends Oe {
+  get debugName() {
+    return this._debugNameData.getDebugName(this) ?? "ObservableValue";
+  }
+  constructor(e, t, n, r) {
+    var i;
+    super(r), this._debugNameData = e, this._equalityComparator = n, this._value = t, (i = b()) == null || i.handleObservableUpdated(this, { hadValue: !1, newValue: t, change: void 0, didChange: !0, oldValue: void 0 });
+  }
+  get() {
+    return this._value;
+  }
+  set(e, t, n) {
+    var i;
+    if (n === void 0 && this._equalityComparator(this._value, e))
+      return;
+    let r;
+    t || (t = r = new ot(() => {
+    }, () => `Setting ${this.debugName}`));
+    try {
+      const o = this._value;
+      this._setValue(e), (i = b()) == null || i.handleObservableUpdated(this, { oldValue: o, newValue: e, change: n, didChange: !0, hadValue: !0 });
+      for (const d of this._observers)
+        t.updateObserver(d, this), d.handleChange(this, n);
+    } finally {
+      r && r.finish();
+    }
+  }
+  toString() {
+    return `${this.debugName}: ${this._value}`;
+  }
+  _setValue(e) {
+    this._value = e;
+  }
+  debugGetState() {
+    return {
+      value: this._value
+    };
+  }
+  debugSetValue(e) {
+    this._value = e;
+  }
+}
+function He(...s) {
+  let e, t, n, r;
+  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 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 g;
+      const c = this._getValue(d), h = this._value, m = !this._hasValue || !this._equalityComparator(h, c);
+      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 V of this._observers)
+          v.updateObserver(V, this), V.handleChange(this, void 0);
+      }, () => {
+        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() {
+    return this._debugNameData.getDebugName(this);
+  }
+  get debugName() {
+    const e = this.getDebugName();
+    return "From Event" + (e ? `: ${e}` : "");
+  }
+  onFirstObserverAdded() {
+    this._subscription = this.event(this.handleEvent);
+  }
+  onLastObserverRemoved() {
+    this._subscription.dispose(), this._subscription = void 0, this._hasValue = !1, this._value = void 0;
+  }
+  get() {
+    return this._subscription ? (this._hasValue || this.handleEvent(void 0), this._value) : this._getValue(void 0);
+  }
+  debugSetValue(e) {
+    this._value = e;
+  }
+  debugGetState() {
+    return { value: this._value, hasValue: this._hasValue };
+  }
+}
+(function(s) {
+  s.Observer = A;
+  function e(t, n) {
+    let r = !1;
+    A.globalTransaction === void 0 && (A.globalTransaction = t, r = !0);
+    try {
+      n();
+    } finally {
+      r && (A.globalTransaction = void 0);
+    }
+  }
+  s.batchEventsGlobally = e;
+})(He || (He = {}));
+function Qt(s) {
+  const e = new at(!1, void 0);
+  return s.addObserver(e), st(() => {
+    s.removeObserver(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 st(() => {
+    s.removeObserver(t);
+  });
+}
+jt(Yt);
+class at {
+  constructor(e, t) {
+    this._forceRecompute = e, this._handleValue = t, this._counter = 0;
+  }
+  beginUpdate(e) {
+    this._counter++;
+  }
+  endUpdate(e) {
+    this._counter === 1 && this._forceRecompute && (this._handleValue ? this._handleValue(e.get()) : e.reportChanges()), this._counter--;
+  }
+  handlePossibleChange(e) {
+  }
+  handleChange(e, t) {
+  }
+}
+let ne;
+function en(s) {
+  ne || (ne = new tn(), Qe(ne)), ne.addFilteredObj(s);
+}
+class tn {
+  constructor() {
+    this.indentation = 0, this.changedObservablesSets = /* @__PURE__ */ new WeakMap();
+  }
+  addFilteredObj(e) {
+    this._filteredObjects || (this._filteredObjects = /* @__PURE__ */ new Set()), this._filteredObjects.add(e);
+  }
+  _isIncluded(e) {
+    var t;
+    return ((t = this._filteredObjects) == null ? void 0 : t.has(e)) ?? !0;
+  }
+  textToConsoleArgs(e) {
+    return nn([
+      G(on("|  ", this.indentation)),
+      e
+    ]);
+  }
+  formatInfo(e) {
+    return e.hadValue ? e.didChange ? [
+      G(" "),
+      I(M(e.oldValue, 70), {
+        color: "red",
+        strikeThrough: !0
+      }),
+      G(" "),
+      I(M(e.newValue, 60), {
+        color: "green"
+      })
+    ] : [G(" (unchanged)")] : [
+      G(" "),
+      I(M(e.newValue, 60), {
+        color: "green"
+      }),
+      G(" (initial)")
+    ];
+  }
+  handleObservableCreated(e) {
+    if (e instanceof w) {
+      const t = e;
+      this.changedObservablesSets.set(t, /* @__PURE__ */ new Set());
+    }
+  }
+  handleOnListenerCountChanged(e, t) {
+  }
+  handleObservableUpdated(e, t) {
+    if (this._isIncluded(e)) {
+      if (e instanceof w) {
+        this._handleDerivedRecomputed(e, t);
+        return;
+      }
+      console.log(...this.textToConsoleArgs([
+        W("observable value changed"),
+        I(e.debugName, { color: "BlueViolet" }),
+        ...this.formatInfo(t)
+      ]));
+    }
+  }
+  formatChanges(e) {
+    if (e.size !== 0)
+      return I(" (changed deps: " + [...e].map((t) => t.debugName).join(", ") + ")", { color: "gray" });
+  }
+  handleDerivedDependencyChanged(e, t, n) {
+    var r;
+    this._isIncluded(e) && ((r = this.changedObservablesSets.get(e)) == null || r.add(t));
+  }
+  _handleDerivedRecomputed(e, t) {
+    if (!this._isIncluded(e))
+      return;
+    const n = this.changedObservablesSets.get(e);
+    n && (console.log(...this.textToConsoleArgs([
+      W("derived recomputed"),
+      I(e.debugName, { color: "BlueViolet" }),
+      ...this.formatInfo(t),
+      this.formatChanges(n),
+      { data: [{ fn: e._debugNameData.referenceFn ?? e._computeFn }] }
+    ])), n.clear());
+  }
+  handleDerivedCleared(e) {
+    this._isIncluded(e) && console.log(...this.textToConsoleArgs([
+      W("derived cleared"),
+      I(e.debugName, { color: "BlueViolet" })
+    ]));
+  }
+  handleFromEventObservableTriggered(e, t) {
+    this._isIncluded(e) && console.log(...this.textToConsoleArgs([
+      W("observable from event triggered"),
+      I(e.debugName, { color: "BlueViolet" }),
+      ...this.formatInfo(t),
+      { data: [{ fn: e._getValue }] }
+    ]));
+  }
+  handleAutorunCreated(e) {
+    this._isIncluded(e) && this.changedObservablesSets.set(e, /* @__PURE__ */ new Set());
+  }
+  handleAutorunDisposed(e) {
+  }
+  handleAutorunDependencyChanged(e, t, n) {
+    this._isIncluded(e) && this.changedObservablesSets.get(e).add(t);
+  }
+  handleAutorunStarted(e) {
+    const t = this.changedObservablesSets.get(e);
+    t && (this._isIncluded(e) && console.log(...this.textToConsoleArgs([
+      W("autorun"),
+      I(e.debugName, { color: "BlueViolet" }),
+      this.formatChanges(t),
+      { data: [{ fn: e._debugNameData.referenceFn ?? e._runFn }] }
+    ])), t.clear(), this.indentation++);
+  }
+  handleAutorunFinished(e) {
+    this.indentation--;
+  }
+  handleBeginTransaction(e) {
+    let t = e.getDebugName();
+    t === void 0 && (t = ""), this._isIncluded(e) && console.log(...this.textToConsoleArgs([
+      W("transaction"),
+      I(t, { color: "BlueViolet" }),
+      { data: [{ fn: e._fn }] }
+    ])), this.indentation++;
+  }
+  handleEndTransaction() {
+    this.indentation--;
+  }
+}
+function nn(s) {
+  const e = new Array(), t = [];
+  let n = "";
+  function r(o) {
+    if ("length" in o)
+      for (const d of o)
+        d && r(d);
+    else "text" in o ? (n += `%c${o.text}`, e.push(o.style), o.data && t.push(...o.data)) : "data" in o && t.push(...o.data);
+  }
+  r(s);
+  const i = [n, ...e];
+  return i.push(...t), i;
+}
+function G(s) {
+  return I(s, { color: "black" });
+}
+function W(s) {
+  return I(an(`${s}: `, 10), { color: "black", bold: !0 });
+}
+function I(s, e = {
+  color: "black"
+}) {
+  function t(r) {
+    return Object.entries(r).reduce((i, [o, d]) => `${i}${o}:${d};`, "");
+  }
+  const n = {
+    color: e.color
+  };
+  return e.strikeThrough && (n["text-decoration"] = "line-through"), e.bold && (n["font-weight"] = "bold"), {
+    text: s,
+    style: t(n)
+  };
+}
+function M(s, e) {
+  switch (typeof s) {
+    case "number":
+      return "" + s;
+    case "string":
+      return s.length + 2 <= e ? `"${s}"` : `"${s.substr(0, e - 7)}"+...`;
+    case "boolean":
+      return s ? "true" : "false";
+    case "undefined":
+      return "undefined";
+    case "object":
+      return s === null ? "null" : Array.isArray(s) ? sn(s, e) : rn(s, e);
+    case "symbol":
+      return s.toString();
+    case "function":
+      return `[[Function${s.name ? " " + s.name : ""}]]`;
+    default:
+      return "" + s;
+  }
+}
+function sn(s, e) {
+  let t = "[ ", n = !0;
+  for (const r of s) {
+    if (n || (t += ", "), t.length - 5 > e) {
+      t += "...";
+      break;
+    }
+    n = !1, t += `${M(r, e - t.length)}`;
+  }
+  return t += " ]", t;
+}
+function rn(s, e) {
+  if (typeof s.toString == "function" && s.toString !== Object.prototype.toString) {
+    const i = s.toString();
+    return i.length <= e ? i : i.substring(0, e - 3) + "...";
+  }
+  const t = Ye(s);
+  let n = t ? t + "(" : "{ ", r = !0;
+  for (const [i, o] of Object.entries(s)) {
+    if (r || (n += ", "), n.length - 5 > e) {
+      n += "...";
+      break;
+    }
+    r = !1, n += `${i}: ${M(o, e - n.length)}`;
+  }
+  return n += t ? ")" : " }", n;
+}
+function on(s, e) {
+  let t = "";
+  for (let n = 1; n <= e; n++)
+    t += s;
+  return t;
+}
+function an(s, e) {
+  for (; s.length < e; )
+    s += " ";
+  return s;
+}
+class oe {
+  static createHost(e, t) {
+    return new oe(e, t);
+  }
+  static createClient(e, t) {
+    return new oe(e, t);
+  }
+  constructor(e, t) {
+    this._channelFactory = e, this._getHandler = t, this._channel = this._channelFactory({
+      handleNotification: (i) => {
+        const o = i, d = this._getHandler().notifications[o[0]];
+        if (!d)
+          throw new Error(`Unknown notification "${o[0]}"!`);
+        d(...o[1]);
+      },
+      handleRequest: (i) => {
+        const o = i;
+        try {
+          return { type: "result", value: this._getHandler().requests[o[0]](...o[1]) };
+        } catch (d) {
+          return { type: "error", value: d };
+        }
+      }
+    });
+    const n = new Proxy({}, {
+      get: (i, o) => async (...d) => {
+        const c = await this._channel.sendRequest([o, d]);
+        if (c.type === "error")
+          throw c.value;
+        return c.value;
+      }
+    }), r = new Proxy({}, {
+      get: (i, o) => (...d) => {
+        this._channel.sendNotification([o, d]);
+      }
+    });
+    this.api = { notifications: r, requests: n };
+  }
+}
+function dn(s, e) {
+  const t = globalThis;
+  let n = [], r;
+  const { channel: i, handler: o } = cn({
+    sendNotification: (c) => {
+      r ? r.sendNotification(c) : n.push(c);
+    }
+  });
+  let d;
+  return (t.$$debugValueEditor_debugChannels ?? (t.$$debugValueEditor_debugChannels = {}))[s] = (c) => {
+    d = e(), r = c;
+    for (const h of n)
+      c.sendNotification(h);
+    return n = [], o;
+  }, oe.createClient(i, () => {
+    if (!d)
+      throw new Error("Not supported");
+    return d;
+  });
+}
+function cn(s) {
+  let e;
+  return {
+    channel: (n) => (e = n, {
+      sendNotification: (r) => {
+        s.sendNotification(r);
+      },
+      sendRequest: (r) => {
+        throw new Error("not supported");
+      }
+    }),
+    handler: {
+      handleRequest: (n) => n.type === "notification" ? e == null ? void 0 : e.handleNotification(n.data) : e == null ? void 0 : e.handleRequest(n.data)
+    }
+  };
+}
+class ln {
+  constructor() {
+    this._timeout = void 0;
+  }
+  throttle(e, t) {
+    this._timeout === void 0 && (this._timeout = setTimeout(() => {
+      this._timeout = void 0, e();
+    }, t));
+  }
+  dispose() {
+    this._timeout !== void 0 && clearTimeout(this._timeout);
+  }
+}
+function dt(s, e) {
+  for (const t in e)
+    s[t] && typeof s[t] == "object" && e[t] && typeof e[t] == "object" ? dt(s[t], e[t]) : s[t] = e[t];
+}
+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" ? ct(s[t], e[t]) : s[t] = e[t];
+}
+class P {
+  static getInstance() {
+    return P._instance === void 0 && (P._instance = new P()), P._instance;
+  }
+  getTransactionState() {
+    const e = [], t = [...this._activeTransactions];
+    if (t.length === 0)
+      return;
+    const n = t.flatMap((i) => i.debugGetUpdatingObservers() ?? []).map((i) => i.observer), r = /* @__PURE__ */ new Set();
+    for (; n.length > 0; ) {
+      const i = n.shift();
+      if (r.has(i))
+        continue;
+      r.add(i);
+      const o = this._getInfo(i, (d) => {
+        r.has(d) || n.push(d);
+      });
+      o && e.push(o);
+    }
+    return { names: t.map((i) => i.getDebugName() ?? "tx"), affected: e };
+  }
+  _getObservableInfo(e) {
+    const t = this._instanceInfos.get(e);
+    if (!t) {
+      pe(new O("No info found"));
+      return;
+    }
+    return t;
+  }
+  _getAutorunInfo(e) {
+    const t = this._instanceInfos.get(e);
+    if (!t) {
+      pe(new O("No info found"));
+      return;
+    }
+    return t;
+  }
+  _getInfo(e, t) {
+    if (e instanceof w) {
+      const n = [...e.debugGetObservers()];
+      for (const c of n)
+        t(c);
+      const r = this._getObservableInfo(e);
+      if (!r)
+        return;
+      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(ee);
+      if (i.isComputing)
+        return { ...o, type: "observable/derived", state: "updating", changedDependencies: d, initialComputation: !1 };
+      switch (i.state) {
+        case 0:
+          return { ...o, type: "observable/derived", state: "noValue" };
+        case 3:
+          return { ...o, type: "observable/derived", state: "upToDate" };
+        case 2:
+          return { ...o, type: "observable/derived", state: "stale", changedDependencies: d };
+        case 1:
+          return { ...o, type: "observable/derived", state: "possiblyStale" };
+      }
+    } else if (e instanceof re) {
+      const n = this._getAutorunInfo(e);
+      if (!n)
+        return;
+      const r = { name: e.debugName, instanceId: n.instanceId, updateCount: n.updateCount }, i = [...n.changedObservables].map((o) => this._instanceInfos.get(o).instanceId);
+      if (e.debugGetState().isRunning)
+        return { ...r, type: "autorun", state: "updating", changedDependencies: i };
+      switch (e.debugGetState().state) {
+        case 3:
+          return { ...r, type: "autorun", state: "upToDate" };
+        case 2:
+          return { ...r, type: "autorun", state: "stale", changedDependencies: i };
+        case 1:
+          return { ...r, type: "autorun", state: "possiblyStale" };
+      }
+    }
+  }
+  _formatObservable(e) {
+    const t = this._getObservableInfo(e);
+    if (t)
+      return { name: e.debugName, instanceId: t.instanceId };
+  }
+  _formatObserver(e) {
+    var n;
+    if (e instanceof w)
+      return { name: e.toString(), instanceId: (n = this._getObservableInfo(e)) == null ? void 0 : n.instanceId };
+    const t = this._getAutorunInfo(e);
+    if (t)
+      return { name: e.toString(), instanceId: t.instanceId };
+  }
+  constructor() {
+    this._declarationId = 0, this._instanceId = 0, this._declarations = /* @__PURE__ */ new Map(), this._instanceInfos = /* @__PURE__ */ new WeakMap(), this._aliveInstances = /* @__PURE__ */ new Map(), this._activeTransactions = /* @__PURE__ */ new Set(), this._channel = dn("observableDevTools", () => ({
+      notifications: {
+        setDeclarationIdFilter: (e) => {
+        },
+        logObservableValue: (e) => {
+          console.log("logObservableValue", e);
+        },
+        flushUpdates: () => {
+          this._flushUpdates();
+        },
+        resetUpdates: () => {
+          this._pendingChanges = null, this._channel.api.notifications.handleChange(this._fullState, !0);
+        }
+      },
+      requests: {
+        getDeclarations: () => {
+          const e = {};
+          for (const t of this._declarations.values())
+            e[t.id] = t;
+          return { decls: e };
+        },
+        getSummarizedInstances: () => null,
+        getObservableValueInfo: (e) => ({
+          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(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(ee)
+        }),
+        getTransactionState: () => this.getTransactionState(),
+        setValue: (e, t) => {
+          const n = this._aliveInstances.get(e);
+          if (n instanceof w)
+            n.debugSetValue(t);
+          else if (n instanceof ie)
+            n.debugSetValue(t);
+          else if (n instanceof A)
+            n.debugSetValue(t);
+          else
+            throw new O("Observable is not supported");
+          const r = [...n.debugGetObservers()];
+          for (const i of r)
+            i.beginUpdate(n);
+          for (const i of r)
+            i.handleChange(n, void 0);
+          for (const i of r)
+            i.endUpdate(n);
+        },
+        getValue: (e) => {
+          const t = this._aliveInstances.get(e);
+          if (t instanceof w)
+            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 O("Observable is not supported");
+        },
+        rerun: (e) => {
+          const t = this._aliveInstances.get(e);
+          if (t instanceof w)
+            t.debugRecompute();
+          else if (t instanceof re)
+            t.debugRerun();
+          else
+            throw new O("Observable is not supported");
+        }
+      }
+    })), this._pendingChanges = null, this._changeThrottler = new ln(), this._fullState = {}, this._flushUpdates = () => {
+      this._pendingChanges !== null && (this._channel.api.notifications.handleChange(this._pendingChanges, !1), this._pendingChanges = null);
+    }, T.enable();
+  }
+  _handleChange(e) {
+    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)
+      return -1;
+    let n = this._declarations.get(t.id);
+    return n === void 0 && (n = {
+      id: this._declarationId++,
+      type: e,
+      url: t.fileName,
+      line: t.line,
+      column: t.column
+    }, this._declarations.set(t.id, n), this._handleChange({ decls: { [n.id]: n } })), n.id;
+  }
+  handleObservableCreated(e, t) {
+    const r = {
+      declarationId: this._getDeclarationId("observable/value", t),
+      instanceId: this._instanceId++,
+      listenerCount: 0,
+      lastValue: void 0,
+      updateCount: 0,
+      changedObservables: /* @__PURE__ */ new Set()
+    };
+    this._instanceInfos.set(e, r);
+  }
+  handleOnListenerCountChanged(e, t) {
+    const n = this._getObservableInfo(e);
+    if (n) {
+      if (n.listenerCount === 0 && t > 0) {
+        const r = e instanceof w ? "observable/derived" : "observable/value";
+        this._aliveInstances.set(n.instanceId, e), this._handleChange({
+          instances: {
+            [n.instanceId]: {
+              instanceId: n.instanceId,
+              declarationId: n.declarationId,
+              formattedValue: n.lastValue,
+              type: r,
+              name: e.debugName
+            }
+          }
+        });
+      } else n.listenerCount > 0 && t === 0 && (this._handleChange({
+        instances: { [n.instanceId]: null }
+      }), this._aliveInstances.delete(n.instanceId));
+      n.listenerCount = t;
+    }
+  }
+  handleObservableUpdated(e, t) {
+    if (e instanceof w) {
+      this._handleDerivedRecomputed(e, t);
+      return;
+    }
+    const n = this._getObservableInfo(e);
+    n && t.didChange && (n.lastValue = M(t.newValue, 30), n.listenerCount > 0 && this._handleChange({
+      instances: { [n.instanceId]: { formattedValue: n.lastValue } }
+    }));
+  }
+  handleAutorunCreated(e, t) {
+    const r = {
+      declarationId: this._getDeclarationId("autorun", t),
+      instanceId: this._instanceId++,
+      updateCount: 0,
+      changedObservables: /* @__PURE__ */ new Set()
+    };
+    this._instanceInfos.set(e, r), this._aliveInstances.set(r.instanceId, e), r && this._handleChange({
+      instances: {
+        [r.instanceId]: {
+          instanceId: r.instanceId,
+          declarationId: r.declarationId,
+          runCount: 0,
+          type: "autorun",
+          name: e.debugName
+        }
+      }
+    });
+  }
+  handleAutorunDisposed(e) {
+    const t = this._getAutorunInfo(e);
+    t && (this._handleChange({
+      instances: { [t.instanceId]: null }
+    }), this._instanceInfos.delete(e), this._aliveInstances.delete(t.instanceId));
+  }
+  handleAutorunDependencyChanged(e, t, n) {
+    const r = this._getAutorunInfo(e);
+    r && r.changedObservables.add(t);
+  }
+  handleAutorunStarted(e) {
+  }
+  handleAutorunFinished(e) {
+    const t = this._getAutorunInfo(e);
+    t && (t.changedObservables.clear(), t.updateCount++, this._handleChange({
+      instances: { [t.instanceId]: { runCount: t.updateCount } }
+    }));
+  }
+  handleDerivedDependencyChanged(e, t, n) {
+    const r = this._getObservableInfo(e);
+    r && r.changedObservables.add(t);
+  }
+  _handleDerivedRecomputed(e, t) {
+    const n = this._getObservableInfo(e);
+    if (!n)
+      return;
+    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 } }
+    });
+  }
+  handleDerivedCleared(e) {
+    const t = this._getObservableInfo(e);
+    t && (t.lastValue = void 0, t.changedObservables.clear(), t.listenerCount > 0 && this._handleChange({
+      instances: {
+        [t.instanceId]: {
+          formattedValue: void 0
+        }
+      }
+    }));
+  }
+  handleBeginTransaction(e) {
+    this._activeTransactions.add(e);
+  }
+  handleEndTransaction(e) {
+    this._activeTransactions.delete(e);
+  }
+}
+P._instance = void 0;
+function hn(s, e) {
+  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 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: ${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(lt(o, e + 1, t));
+  }
+  return r.join(`
+`);
+}
+class R {
+  static from(e, t) {
+    if (e instanceof re) {
+      const n = e.debugGetState();
+      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 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 R(e, t(e.debugName), "observableValue", n.value, "upToDate", []);
+    } else if (e instanceof A) {
+      const n = e.debugGetState();
+      return new R(e, t(e.debugName), "fromEvent", n.value, n.hasValue ? "upToDate" : "initial", []);
+    }
+  }
+  static unknown(e) {
+    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);
+Et(en);
+Qe(P.getInstance());
+class un {
+  constructor() {
+    l(this, "_fixtures", x(this, /* @__PURE__ */ new Map()));
+    /** Observable root of the fixture tree */
+    l(this, "root", F(this, (e) => {
+      const t = this._fixtures.read(e);
+      return le(t);
+    }));
+  }
+  /**
+   * Registers a fixture file.
+   * @param path The file path (e.g., 'components/Button.fixture.tsx')
+   * @param fixtureExport The exported fixture object
+   */
+  register(e, t) {
+    const n = new Map(this._fixtures.get());
+    n.set(e, t), this._fixtures.set(n, void 0);
+  }
+  /**
+   * Unregisters a fixture file.
+   * @param path The file path to remove
+   */
+  unregister(e) {
+    const t = new Map(this._fixtures.get());
+    t.delete(e) && this._fixtures.set(t, void 0);
+  }
+  /**
+   * Clears all registered fixtures.
+   */
+  clear() {
+    this._fixtures.set(/* @__PURE__ */ new Map(), void 0);
+  }
+  /**
+   * Gets a node by path.
+   */
+  getNode(e, t) {
+    const n = this.root.read(e);
+    return Fe(n, t);
+  }
+  /**
+   * Gets a component by path (non-reactive, for use in preview iframe).
+   * @param path Array of path segments (e.g., ['Button', 'Primary'])
+   */
+  getComponentByPath(e) {
+    const t = this._fixtures.get(), n = le(t), r = Fe(n, e);
+    return r == null ? void 0 : r.component;
+  }
+}
+class As {
+  constructor(e, t) {
+    l(this, "sessionId", Math.random().toString(36).slice(2));
+    l(this, "_updateVersion", 0);
+    l(this, "_root");
+    l(this, "_fixtureModules");
+    l(this, "_currentDisposable");
+    l(this, "_currentContainer");
+    this._containerElement = e, this._fixtureModules = t, this._root = this._buildRegistry(), this._installGlobalApi();
+    const n = this._flattenFixtures(this._root).length;
+    console.log("[cli] CLI entry initialized, sessionId:", this.sessionId, "version:", this._updateVersion, "fixtures:", n);
+  }
+  get updateVersion() {
+    return this._updateVersion;
+  }
+  updateFixtures(e) {
+    this._fixtureModules = e, this._root = this._buildRegistry(), this._updateVersion++;
+    const t = this._flattenFixtures(this._root).length;
+    console.log("[cli] Registry rebuilt, version:", this._updateVersion, "fixtures:", t);
+  }
+  bumpVersion() {
+    this._updateVersion++, console.log("[cli] Version bumped:", this._updateVersion);
+  }
+  listFixtures() {
+    return this._flattenFixtures(this._root);
+  }
+  async renderFixture(e) {
+    const t = this._findFixtureNode(this._root, e);
+    if (!t || !t.component)
+      throw new Error("Fixture not found: " + e);
+    this._currentDisposable && (this._currentDisposable.dispose(), this._currentDisposable = void 0), this._currentContainer && (this._currentContainer.remove(), this._currentContainer = void 0);
+    const n = document.createElement("div");
+    n.style.display = "inline-block", this._containerElement.appendChild(n), this._currentContainer = n;
+    const r = t.component, i = Dt(r.properties);
+    let o = n;
+    if (r.isolation === "shadow-dom") {
+      const g = n.attachShadow({ mode: "open" });
+      o = document.createElement("div"), g.appendChild(o);
+    }
+    const d = [], c = console.error, h = console.warn;
+    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 = (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", _);
+    try {
+      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((g) => requestAnimationFrame(() => requestAnimationFrame(() => g()))), window.removeEventListener("error", m), window.removeEventListener("unhandledrejection", _), { errors: d };
+  }
+  _buildRegistry() {
+    const e = /* @__PURE__ */ new Map();
+    for (const [t, n] of Object.entries(this._fixtureModules)) {
+      const r = n.default;
+      r && typeof r == "object" && e.set(t, r);
+    }
+    return le(e);
+  }
+  _flattenFixtures(e, t = []) {
+    var r;
+    const n = [];
+    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;
+  }
+  _findFixtureNode(e, t) {
+    if (e.id === t) return e;
+    for (const n of e.children ?? []) {
+      const r = this._findFixtureNode(n, t);
+      if (r) return r;
+    }
+  }
+  _installGlobalApi() {
+    window.__componentExplorerCli__ = {
+      sessionId: this.sessionId,
+      get updateVersion() {
+        return 0;
+      },
+      listFixtures: () => this.listFixtures(),
+      renderFixture: (e) => this.renderFixture(e)
+    }, Object.defineProperty(window.__componentExplorerCli__, "updateVersion", {
+      get: () => this._updateVersion
+    });
+  }
+}
+class fn {
+  constructor(e) {
+    this._run = e, this._changes = [], this._map = /* @__PURE__ */ new Map(), this._updateCounter = 0;
+  }
+  addDependency(e, t) {
+    return this._map.set(e, t), e.addObserver(this), {
+      dispose: () => {
+        this._map.delete(e), e.removeObserver(this);
+      }
+    };
+  }
+  beginUpdate(e) {
+    this._updateCounter++, this._changes.push(this._map.get(e));
+  }
+  endUpdate(e) {
+    if (this._updateCounter--, this._updateCounter === 0 && this._changes.length > 0) {
+      const t = this._changes;
+      this._changes = [], this._run(t);
+    }
+  }
+  handlePossibleChange(e) {
+    this._changes.push(this._map.get(e));
+  }
+  handleChange(e, t) {
+  }
+}
+function u() {
+  return ge.instance;
+}
+function pn() {
+  return me.instance;
+}
+function gn() {
+  return ve.instance;
+}
+u.const = pn;
+u.obs = gn;
+class ge {
+  create(e) {
+    const t = F((n) => e(n));
+    return { read: (n) => t };
+  }
+}
+ge.instance = new ge();
+class me {
+  create(e) {
+    const t = F((n) => e(n));
+    return { read: (n) => t.read(n) };
+  }
+}
+me.instance = new me();
+class ve {
+  create(e) {
+    const t = F((n) => {
+      const r = e(n);
+      return mn(r) ? r.read(n) : r;
+    });
+    return { read: (n) => t };
+  }
+}
+ve.instance = new ve();
+function mn(s) {
+  return typeof s == "object" && s !== null && "read" in s;
+}
+function Z(s, e) {
+  return Object.fromEntries(Object.entries(s).map(([t, n]) => [t, e(n, t)]));
+}
+const de = Symbol("ViewModelContext");
+class vn {
+  constructor(e) {
+    this._store = new Y(), this.props = e;
+  }
+  dispose() {
+    this._store.dispose();
+  }
+}
+function _n(s) {
+  return s[de] || (s[de] = Je(void 0)), s[de];
+}
+function z(s = {}) {
+  var e;
+  return e = class extends vn {
+  }, e._props = s, e;
+}
+let _e = 0;
+const bn = new fn((s) => {
+  for (const e of s)
+    e.rendered = !1;
+  if (_e > 0) {
+    const e = s.find((t) => t.isRendering);
+    e.itemsToRender = s;
+  } else
+    Ze(() => {
+      for (const e of s)
+        e.rendered || e.forceUpdate();
+    });
+});
+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 = () => {
+      Ze(() => {
+        for (const n of this.itemsToRender)
+          n.rendered || n.forceUpdate();
+      }), this.itemsToRender = [];
+    }, this.rendering = void 0, this.isRendering = !1, this.rendered = !1;
+  }
+  toString() {
+    return this.debugName;
+  }
+  updateProps(e) {
+    this._obsProps ? this._obsProps.set(e, void 0) : (this._obsProps = x(this, e), this._render = this.renderFactory(this._obsProps, () => this.contextValues), this.rendering = F(this, this._render), this._disposable = bn.addDependency(this.rendering, this));
+  }
+}
+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, Tt(h));
+    if (De(c.cleanupEffect, []), De(c.handleAfterRender), c.isRendering)
+      throw new Error("Component is already rendering");
+    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, _e--;
+    }
+  };
+  return i.displayName = s, i;
+}
+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 = Z(n, (o) => o.read(r));
+      return e(r, i);
+    };
+  });
+}
+function Cn(s) {
+  const e = [];
+  for (const t of Object.values(s)) {
+    const n = t._requiredContext;
+    n && !e.includes(n) && e.push(n);
+  }
+  return e;
+}
+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);
+}
+k({ value: u.obs() }, (s, e) => e.value.read(s));
+Je(null);
+function ht(s) {
+  var e;
+  return {
+    id: s.id,
+    name: s.name,
+    type: s.type,
+    children: (e = s.children) == null ? void 0 : e.map(ht),
+    component: s.component
+  };
+}
+function te(s, e) {
+  const {
+    storageKey: t,
+    defaultValue: n,
+    serialize: r = JSON.stringify,
+    deserialize: i = JSON.parse
+  } = e;
+  let o = n;
+  try {
+    const h = localStorage.getItem(t);
+    h !== null && (o = i(h));
+  } catch {
+  }
+  const d = x(s, o), c = d.set.bind(d);
+  return d.set = (h, m) => {
+    try {
+      localStorage.setItem(t, r(h));
+    } catch {
+    }
+    c(h, m);
+  }, d;
+}
+class Sn extends z({
+  registry: u.const(),
+  daemonModel: u.const(),
+  reportModel: u.const()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "leftSidebarVisible", te(this, {
+      storageKey: "component-explorer:leftSidebarVisible",
+      defaultValue: !0
+    }));
+    l(this, "rightSidebarVisible", te(this, {
+      storageKey: "component-explorer:rightSidebarVisible",
+      defaultValue: !1
+    }));
+    l(this, "isDarkTheme", te(this, {
+      storageKey: "component-explorer:isDarkTheme",
+      defaultValue: !0
+    }));
+    l(this, "selectedNodeId", te(this, {
+      storageKey: "component-explorer:selectedNodeId",
+      defaultValue: void 0
+    }));
+    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 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", F(this, (t) => {
+      const n = this.selectedNodeId.read(t);
+      if (n === void 0) return;
+      const r = this.tree.read(t);
+      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", F(this, (t) => {
+      const n = this.selectedNode.read(t);
+      return n ? this.isReportMode ? (this.props.reportModel.state.read(t), this._collectReportRows(n, n.name)) : this.viewMode.read(t) === "diff" && this.daemonAvailable ? this._collectDiffRows(n, n.name) : this._collectPreviewRows(n, n.name) : [];
+    }));
+    l(this, "setViewMode", (t) => {
+      this.viewMode.set(t, void 0);
+    });
+    l(this, "navigateToSession", (t) => {
+      const n = this.props.daemonModel;
+      if (!n) return;
+      const r = n.getSessionExplorerUrl(t);
+      r && (window.location.href = r);
+    });
+    l(this, "toggleLeftSidebar", () => {
+      this.leftSidebarVisible.set(!this.leftSidebarVisible.get(), void 0);
+    });
+    l(this, "toggleRightSidebar", () => {
+      this.rightSidebarVisible.set(!this.rightSidebarVisible.get(), void 0);
+    });
+    l(this, "toggleTheme", () => {
+      this.isDarkTheme.set(!this.isDarkTheme.get(), void 0);
+    });
+    l(this, "selectNode", (t) => {
+      this.selectedNodeId.set(t, void 0);
+    });
+    l(this, "toggleNodeExpanded", (t) => {
+      const n = this.expandedNodeIds.get(), r = new Set(n);
+      r.has(t) ? r.delete(t) : r.add(t), this.expandedNodeIds.set(r, void 0);
+    });
+  }
+  get daemonAvailable() {
+    return this.props.daemonModel !== void 0;
+  }
+  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);
+  }
+  _findNode(t, n) {
+    for (const r of t) {
+      if (r.id === n) return r;
+      if (r.children) {
+        const i = this._findNode(r.children, n);
+        if (i) return i;
+      }
+    }
+  }
+  _collectPreviewRows(t, n) {
+    if (t.type === "component" && t.component)
+      return [{
+        type: "single",
+        fixture: {
+          id: t.id,
+          name: t.name,
+          path: n,
+          component: t.component
+        }
+      }];
+    if (t.type === "variants") {
+      const i = [];
+      for (const o of t.children ?? [])
+        o.type === "component" && o.component && i.push({
+          id: o.id,
+          name: o.name,
+          path: `${n} / ${o.name}`,
+          component: o.component
+        });
+      return i.length > 0 ? [{
+        type: "variants",
+        id: t.id,
+        name: t.name,
+        path: n,
+        fixtures: i
+      }] : [];
+    }
+    const r = [];
+    for (const i of t.children ?? []) {
+      const o = n ? `${n} / ${i.name}` : i.name;
+      r.push(...this._collectPreviewRows(i, o));
+    }
+    return r;
+  }
+  /**
+   * In diff mode: fixtures become screenshot comparison items showing current vs baseline.
+   * Variants become comparison groups.
+   */
+  _collectDiffRows(t, n) {
+    if (t.type === "component")
+      return [{
+        type: "screenshot-comparison",
+        id: t.id,
+        name: t.name,
+        path: n,
+        items: [{
+          fixtureId: t.id,
+          name: t.name,
+          path: n
+        }]
+      }];
+    if (t.type === "variants") {
+      const i = [];
+      for (const o of t.children ?? [])
+        o.type === "component" && i.push({
+          fixtureId: o.id,
+          name: o.name,
+          path: `${n} / ${o.name}`
+        });
+      return i.length > 0 ? [{
+        type: "screenshot-comparison",
+        id: t.id,
+        name: t.name,
+        path: n,
+        items: i
+      }] : [];
+    }
+    const r = [];
+    for (const i of t.children ?? []) {
+      const o = n ? `${n} / ${i.name}` : i.name;
+      r.push(...this._collectDiffRows(i, o));
+    }
+    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 p = {
+  container: {
+    display: "flex",
+    flexDirection: "row",
+    height: "100%",
+    width: "100%",
+    fontFamily: "var(--vscode-font-family)",
+    fontSize: "var(--vscode-font-size)",
+    color: "var(--vscode-foreground)",
+    backgroundColor: "var(--vscode-editor-background)"
+  },
+  centerArea: {
+    display: "flex",
+    flexDirection: "column",
+    flex: 1,
+    overflow: "hidden"
+  },
+  titleBar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    height: "35px",
+    minHeight: "35px",
+    padding: "0 10px",
+    backgroundColor: "var(--vscode-titleBar-activeBackground)",
+    color: "var(--vscode-titleBar-activeForeground)",
+    borderBottom: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))"
+  },
+  titleBarSection: {
+    display: "flex",
+    alignItems: "center",
+    gap: "2px"
+  },
+  titleBarCenter: {
+    display: "flex",
+    alignItems: "center",
+    gap: "4px",
+    fontSize: "13px",
+    fontWeight: 400
+  },
+  titleBarButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "28px",
+    height: "28px",
+    border: "none",
+    background: "transparent",
+    color: "var(--vscode-titleBar-activeForeground)",
+    cursor: "pointer",
+    borderRadius: "4px"
+  },
+  titleBarButtonHover: {
+    backgroundColor: "var(--vscode-toolbar-hoverBackground)"
+  },
+  titleBarButtonActive: {
+    backgroundColor: "var(--vscode-toolbar-activeBackground)",
+    color: "var(--vscode-focusBorder)"
+  },
+  sidebar: {
+    display: "flex",
+    flexDirection: "column",
+    width: "260px",
+    minWidth: "200px",
+    backgroundColor: "var(--vscode-sideBar-background)",
+    borderRight: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))"
+  },
+  sidebarRight: {
+    borderRight: "none",
+    borderLeft: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))"
+  },
+  sidebarHeader: {
+    display: "flex",
+    alignItems: "center",
+    height: "35px",
+    minHeight: "35px",
+    padding: "0 12px",
+    fontSize: "11px",
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: "0.04em",
+    color: "var(--vscode-titleBar-activeForeground)",
+    backgroundColor: "var(--vscode-titleBar-activeBackground)",
+    borderBottom: "1px solid var(--vscode-titleBar-border, var(--vscode-panel-border))"
+  },
+  sidebarContent: {
+    flex: 1,
+    overflow: "auto",
+    padding: "4px 0"
+  },
+  treeItem: {
+    display: "flex",
+    alignItems: "center",
+    height: "22px",
+    paddingRight: "8px",
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  treeItemSelected: {
+    backgroundColor: "var(--vscode-list-activeSelectionBackground)",
+    color: "var(--vscode-list-activeSelectionForeground)"
+  },
+  treeItemHover: {
+    backgroundColor: "var(--vscode-list-hoverBackground)"
+  },
+  treeItemChevron: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    color: "var(--vscode-foreground)",
+    opacity: 0.8,
+    cursor: "pointer"
+  },
+  treeItemChevronPlaceholder: {
+    width: "16px"
+  },
+  treeItemIcon: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "16px",
+    height: "16px",
+    marginRight: "4px"
+  },
+  treeItemLabel: {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    fontSize: "13px"
+  },
+  treeItemCount: {
+    marginLeft: "8px",
+    fontSize: "11px",
+    color: "var(--vscode-descriptionForeground)"
+  },
+  mainContent: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-editor-background)",
+    color: "var(--vscode-descriptionForeground)",
+    fontSize: "14px"
+  },
+  propertiesPanel: {
+    padding: "12px"
+  },
+  propertyRow: {
+    marginBottom: "12px"
+  },
+  propertyLabel: {
+    fontSize: "12px",
+    color: "var(--vscode-foreground)",
+    marginBottom: "4px"
+  },
+  propertyDescription: {
+    fontSize: "11px",
+    color: "var(--vscode-descriptionForeground)",
+    marginTop: "2px"
+  },
+  propertyInput: {
+    width: "100%",
+    height: "26px",
+    padding: "0 8px",
+    fontSize: "13px",
+    color: "var(--vscode-input-foreground)",
+    backgroundColor: "var(--vscode-input-background)",
+    border: "1px solid var(--vscode-input-border, transparent)",
+    borderRadius: "2px",
+    outline: "none",
+    boxSizing: "border-box"
+  },
+  propertySelect: {
+    width: "100%",
+    height: "26px",
+    padding: "0 8px",
+    fontSize: "13px",
+    color: "var(--vscode-dropdown-foreground)",
+    backgroundColor: "var(--vscode-dropdown-background)",
+    border: "1px solid var(--vscode-dropdown-border)",
+    borderRadius: "2px",
+    outline: "none",
+    boxSizing: "border-box",
+    cursor: "pointer"
+  }
+};
+function Te(...s) {
+  return Object.assign({}, ...s.filter(Boolean));
+}
+class wn extends z({
+  active: u()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "isHovered", x(this, !1));
+    l(this, "setHovered", (t) => {
+      this.isHovered.set(t, void 0);
+    });
+  }
+  get active() {
+    return this.props.active;
+  }
+}
+const ce = $(
+  wn,
+  {
+    onClick: u.const(),
+    title: u.const(),
+    children: u.const()
+  },
+  (s, e, t) => {
+    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",
+      {
+        style: i,
+        onClick: t.onClick,
+        title: t.title,
+        onMouseEnter: () => e.setHovered(!0),
+        onMouseLeave: () => e.setHovered(!1),
+        children: t.children
+      }
+    );
+  }
+), 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__ */ 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: X.sessionLinks, children: o.map((h) => /* @__PURE__ */ f(
+        "button",
+        {
+          style: X.sessionLink,
+          onClick: () => t.navigateToSession(h.name),
+          title: `Switch to ${h.name} session`,
+          children: [
+            "→ ",
+            h.name
+          ]
+        },
+        h.name
+      )) })
+    ] });
+  }
+);
+function Le({ label: s, mode: e, active: t, onClick: n }) {
+  return /* @__PURE__ */ a(
+    "button",
+    {
+      style: t ? X.segmentActive : X.segment,
+      onClick: n,
+      children: s
+    }
+  );
+}
+const Fn = k(
+  {
+    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__ */ 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(kn, {})
+        }
+      ) }),
+      /* @__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__ */ 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(Nn, {}) : /* @__PURE__ */ a(Dn, {})
+          }
+        ),
+        /* @__PURE__ */ a(
+          ce,
+          {
+            active: r,
+            onClick: t.toggleRightSidebar,
+            title: "Toggle right sidebar",
+            children: /* @__PURE__ */ a(Vn, {})
+          }
+        )
+      ] })
+    ] });
+  }
+), X = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    marginRight: 12
+  },
+  segmentedControl: {
+    display: "flex",
+    borderRadius: 4,
+    overflow: "hidden",
+    border: "1px solid var(--vscode-panel-border)"
+  },
+  segment: {
+    padding: "2px 10px",
+    fontSize: 11,
+    fontWeight: 500,
+    border: "none",
+    background: "transparent",
+    color: "var(--vscode-descriptionForeground)",
+    cursor: "pointer"
+  },
+  segmentActive: {
+    padding: "2px 10px",
+    fontSize: 11,
+    fontWeight: 500,
+    border: "none",
+    background: "var(--vscode-button-background)",
+    color: "var(--vscode-button-foreground)",
+    cursor: "pointer"
+  },
+  sessionLinks: {
+    display: "flex",
+    gap: 4
+  },
+  sessionLink: {
+    padding: "2px 8px",
+    fontSize: 11,
+    border: "1px solid var(--vscode-panel-border)",
+    borderRadius: 4,
+    background: "transparent",
+    color: "var(--vscode-textLink-foreground)",
+    cursor: "pointer"
+  }
+}, ut = k(
+  {
+    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 En extends z({
+  model: u.const(),
+  node: u.const(),
+  depth: u.const()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "isHovered", x(this, !1));
+    l(this, "setHovered", (t) => {
+      this.isHovered.set(t, void 0);
+    });
+    l(this, "handleClick", () => {
+      this.props.model.selectNode(this.props.node.id);
+    });
+    l(this, "handleDoubleClick", () => {
+      this._hasChildren && this.props.model.toggleNodeExpanded(this.props.node.id);
+    });
+    l(this, "handleChevronClick", (t) => {
+      t.stopPropagation(), this.props.model.toggleNodeExpanded(this.props.node.id);
+    });
+  }
+  // Expose props for render function
+  get explorerModel() {
+    return this.props.model;
+  }
+  get treeNode() {
+    return this.props.node;
+  }
+  get treeDepth() {
+    return this.props.depth;
+  }
+  get _hasChildren() {
+    return !!(this.props.node.children && this.props.node.children.length > 0);
+  }
+}
+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 && p.treeItemSelected,
+    !c && h && p.treeItemHover
+  );
+  return /* @__PURE__ */ f(ye, { children: [
+    /* @__PURE__ */ f(
+      "div",
+      {
+        style: m,
+        onClick: e.handleClick,
+        onDoubleClick: e.handleDoubleClick,
+        onMouseEnter: () => e.setHovered(!0),
+        onMouseLeave: () => e.setHovered(!1),
+        children: [
+          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 })
+  ] });
+}), Bn = k(
+  {
+    model: u.const()
+  },
+  (s, e) => {
+    const t = e.model.tree.read(s);
+    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 zn extends z({}) {
+  constructor() {
+    super(...arguments);
+    l(this, "checked", x(this, !1));
+    l(this, "toggle", () => {
+      this.checked.set(!this.checked.get(), void 0);
+    });
+  }
+}
+const $n = $(zn, {}, (s, e) => {
+  const t = e.checked.read(s), n = {
+    position: "relative",
+    width: "36px",
+    height: "18px",
+    backgroundColor: t ? "var(--vscode-button-background)" : "var(--vscode-input-background)",
+    borderRadius: "9px",
+    cursor: "pointer",
+    transition: "background-color 0.2s",
+    border: "1px solid var(--vscode-input-border, transparent)"
+  }, r = {
+    position: "absolute",
+    top: "2px",
+    left: t ? "18px" : "2px",
+    width: "12px",
+    height: "12px",
+    backgroundColor: "var(--vscode-foreground)",
+    borderRadius: "50%",
+    transition: "left 0.2s"
+  };
+  return /* @__PURE__ */ a("div", { style: n, onClick: e.toggle, children: /* @__PURE__ */ a("div", { style: r }) });
+}), Hn = k(
+  {
+    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__ */ 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" })
+      ] }),
+      /* @__PURE__ */ a(
+        "input",
+        {
+          type: "text",
+          style: p.propertyInput,
+          defaultValue: "Click me",
+          placeholder: "Enter text..."
+        }
+      ),
+      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Button text content" })
+    ] }),
+    /* @__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__ */ 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: p.propertyDescription, children: "Visual style variant" })
+    ] }),
+    /* @__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__ */ 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: p.propertyDescription, children: "Button size" })
+    ] }),
+    /* @__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($n, {}),
+      /* @__PURE__ */ a("div", { style: p.propertyDescription, children: "Disable the button" })
+    ] })
+  ] })
+), Ln = k(
+  {
+    selectedNode: u.const()
+  },
+  (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: 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 Un extends z({
+  fixture: u.const(),
+  compact: u.const()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "_containerRef", null);
+    l(this, "_shadowRoot", null);
+    l(this, "_renderContainer", null);
+    l(this, "_disposable", null);
+    l(this, "_resizeObserver", null);
+    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;
+      n.isolation === "shadow-dom" ? this._renderInShadowDom(t, n) : this._renderDirect(t, n);
+      const r = this._renderContainer ?? t;
+      this._resizeObserver = new ResizeObserver((i) => {
+        for (const o of i) {
+          const { width: d, height: c } = o.contentRect;
+          c > 0 && (this.measuredWidth.set(Math.round(d), void 0), this.measuredHeight.set(Math.round(c), void 0));
+        }
+      }), this._resizeObserver.observe(r);
+    });
+  }
+  get fixture() {
+    return this.props.fixture;
+  }
+  get compact() {
+    return this.props.compact ?? !1;
+  }
+  _renderInShadowDom(t, n) {
+    if (t.shadowRoot) {
+      for (this._shadowRoot = t.shadowRoot; this._shadowRoot.firstChild; )
+        this._shadowRoot.removeChild(this._shadowRoot.firstChild);
+      this._shadowRoot.adoptedStyleSheets = [];
+    } else
+      this._shadowRoot = t.attachShadow({ mode: "open" });
+    if (n.styles)
+      for (const o of n.styles)
+        if (o.type === "css") {
+          const d = document.createElement("style");
+          d.textContent = o.content, this._shadowRoot.appendChild(d);
+        } else if (o.type === "url") {
+          const d = document.createElement("link");
+          d.rel = "stylesheet", d.href = o.href, this._shadowRoot.appendChild(d);
+        } else o.type === "adopted" && (this._shadowRoot.adoptedStyleSheets = [
+          ...this._shadowRoot.adoptedStyleSheets,
+          o.sheet
+        ]);
+    const r = document.createElement("div");
+    r.style.display = "inline-block", this._renderContainer = r, this._shadowRoot.appendChild(r);
+    const i = this._getDefaultProps(n);
+    this._disposable = n.render(r, i);
+  }
+  _renderDirect(t, n) {
+    this._renderContainer = t;
+    const r = this._getDefaultProps(n);
+    this._disposable = n.render(t, r);
+  }
+  _getDefaultProps(t) {
+    const n = {};
+    for (const r of t.properties)
+      n[r.name] = r.defaultValue;
+    return n;
+  }
+  _cleanup() {
+    var t;
+    this._disposable && (typeof this._disposable == "function" ? this._disposable() : typeof this._disposable.dispose == "function" && this._disposable.dispose()), this._disposable = null, (t = this._resizeObserver) == null || t.disconnect(), this._resizeObserver = null, this._shadowRoot = null, this._renderContainer = null;
+  }
+  dispose() {
+    this._cleanup();
+  }
+}
+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 g = r.viewports[0], v = Nt(g);
+      c = {
+        width: v.width,
+        height: v.height,
+        overflow: "auto"
+      };
+    } else
+      c = {
+        display: "inline-block"
+      };
+    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: Wn(n.background), children: /* @__PURE__ */ a("div", { ref: e.setContainerRef, style: c }) })
+    ] });
+  }
+), q = 8;
+function pt(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 jn = {
+  backgroundColor: "#ffffff",
+  backgroundImage: pt("#ffffff", "#e5e5e5")
+}, Pn = {
+  backgroundColor: "#1e1e1e",
+  backgroundImage: pt("#1e1e1e", "#2d2d2d")
+}, Gn = {
+  display: "inline-block",
+  padding: "12px",
+  borderRadius: "4px",
+  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 Wn(s) {
+  const e = s === "dark" ? Pn : jn;
+  return {
+    ...Gn,
+    backgroundColor: e.backgroundColor,
+    backgroundImage: e.backgroundImage
+  };
+}
+const K = {
+  wrapper: {
+    marginBottom: "32px"
+  },
+  wrapperCompact: {
+    marginBottom: "0"
+  },
+  labelRow: {
+    display: "flex",
+    alignItems: "baseline",
+    gap: "8px",
+    marginBottom: "8px"
+  },
+  name: {
+    fontSize: "12px",
+    fontWeight: 500,
+    color: "var(--vscode-foreground)"
+  },
+  nameCompact: {
+    fontSize: "11px",
+    fontWeight: 500,
+    color: "var(--vscode-descriptionForeground)"
+  },
+  dimensions: {
+    fontSize: "11px",
+    color: "var(--vscode-descriptionForeground)",
+    fontFamily: "var(--vscode-editor-font-family, monospace)"
+  }
+};
+class qn extends z({
+  fixtureId: u.const(),
+  sessionName: u.const(),
+  daemon: u.const()
+}) {
+  constructor(t) {
+    super(t);
+    l(this, "screenshot", x(this, { status: "idle" }));
+    l(this, "_fetchVersion", 0);
+    this._store.add(rt((n) => {
+      this.props.daemon.sourceTreeIds.read(n).get(this.props.sessionName) && this._fetchScreenshot();
+    }));
+  }
+  get fixtureId() {
+    return this.props.fixtureId;
+  }
+  async _fetchScreenshot() {
+    const t = ++this._fetchVersion;
+    this.screenshot.set({ status: "loading" }, void 0);
+    try {
+      const n = await this.props.daemon.getScreenshot(this.props.sessionName, this.props.fixtureId);
+      t === this._fetchVersion && this.screenshot.set({ status: "ready", data: n }, void 0);
+    } catch (n) {
+      t === this._fetchVersion && this.screenshot.set({ status: "error", message: String(n) }, void 0);
+    }
+  }
+}
+const Ue = $(
+  qn,
+  {},
+  (s, e) => {
+    const t = e.screenshot.read(s);
+    if (t.status === "idle" || t.status === "loading")
+      return /* @__PURE__ */ a("div", { style: U.placeholder, children: /* @__PURE__ */ a("div", { style: U.shimmer }) });
+    if (t.status === "error")
+      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: U.image,
+        alt: `Screenshot of ${e.fixtureId}`
+      }
+    ) : /* @__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",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-editor-background)",
+    border: "1px solid var(--vscode-panel-border)",
+    borderRadius: 4,
+    overflow: "hidden"
+  },
+  shimmer: {
+    width: "100%",
+    height: 80,
+    background: "linear-gradient(90deg, var(--vscode-editor-background) 25%, var(--vscode-list-hoverBackground) 50%, var(--vscode-editor-background) 75%)",
+    backgroundSize: "200% 100%",
+    animation: "shimmer 1.5s infinite"
+  },
+  error: {
+    minHeight: 80,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-inputValidation-errorBackground)",
+    border: "1px solid var(--vscode-inputValidation-errorBorder)",
+    borderRadius: 4
+  },
+  errorText: {
+    fontSize: 12,
+    color: "var(--vscode-errorForeground)"
+  },
+  hashText: {
+    fontSize: 11,
+    color: "var(--vscode-descriptionForeground)",
+    fontFamily: "var(--vscode-editor-font-family, monospace)"
+  },
+  image: {
+    maxWidth: "100%",
+    display: "block",
+    borderRadius: 4,
+    border: "1px solid var(--vscode-panel-border)"
+  }
+};
+class Kn extends z({
+  fixtureId: u.const(),
+  daemon: u.const(),
+  baselineSession: u.const(),
+  currentSession: u.const()
+}) {
+  constructor(t) {
+    super(t);
+    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();
+    }));
+  }
+  get fixtureId() {
+    return this.props.fixtureId;
+  }
+  get daemon() {
+    return this.props.daemon;
+  }
+  get baselineSession() {
+    return this.props.baselineSession;
+  }
+  get currentSession() {
+    return this.props.currentSession;
+  }
+  async _fetchComparison() {
+    this.comparisonStatus.set({ status: "loading" }, void 0);
+    try {
+      const t = await this.props.daemon.compare(
+        this.props.fixtureId,
+        this.props.baselineSession,
+        this.props.currentSession
+      );
+      this.comparisonStatus.set({ status: "ready", match: t.match }, void 0);
+    } catch (t) {
+      this.comparisonStatus.set({ status: "error", message: String(t) }, void 0);
+    }
+  }
+}
+const Jn = $(
+  Kn,
+  {},
+  (s, e) => {
+    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__ */ f("div", { style: C.sideBySide, children: [
+        /* @__PURE__ */ f("div", { style: C.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: C.columnLabel, children: "Current" }),
+          /* @__PURE__ */ a(
+            Ue,
+            {
+              fixtureId: e.fixtureId,
+              sessionName: e.currentSession,
+              daemon: e.daemon
+            }
+          )
+        ] }),
+        /* @__PURE__ */ f("div", { style: C.screenshotColumn, children: [
+          /* @__PURE__ */ a("span", { style: C.columnLabel, children: "Baseline" }),
+          /* @__PURE__ */ a(
+            Ue,
+            {
+              fixtureId: e.fixtureId,
+              sessionName: e.baselineSession,
+              daemon: e.daemon
+            }
+          )
+        ] })
+      ] })
+    ] });
+  }
+), Zn = k(
+  {
+    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,
+        baselineSession: e.baselineSession,
+        currentSession: e.currentSession
+      },
+      t.fixtureId
+    )) })
+  ] })
+), C = {
+  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: {
+    flex: 1,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    minWidth: 0
+  },
+  columnLabel: {
+    fontSize: 11,
+    fontWeight: 500,
+    color: "var(--vscode-descriptionForeground)",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  },
+  badgeMatch: {
+    fontSize: 11,
+    color: "var(--vscode-testing-iconPassed)",
+    fontWeight: 500
+  },
+  badgeChanged: {
+    fontSize: 11,
+    color: "var(--vscode-testing-iconFailed)",
+    fontWeight: 500
+  },
+  badgeLoading: {
+    fontSize: 11,
+    color: "var(--vscode-descriptionForeground)",
+    fontStyle: "italic"
+  },
+  badgeError: {
+    fontSize: 11,
+    color: "var(--vscode-errorForeground)",
+    fontWeight: 500
+  }
+}, 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(mt);
+    if (s)
+      return D = JSON.parse(s), D;
+  } catch {
+  }
+  return D = {}, D;
+}
+function ss() {
+  if (D !== null)
+    try {
+      const s = Object.entries(D);
+      s.length > Pe && (D = Object.fromEntries(s.slice(-Pe))), localStorage.setItem(mt, JSON.stringify(D));
+    } catch {
+    }
+}
+function rs(s, e) {
+  const t = vt();
+  t[s] = e, ss();
+}
+function is() {
+  return new Map(Object.entries(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);
+  } catch {
+  }
+  return {};
+}
+function ds(s, e) {
+  try {
+    const t = bt();
+    t[s] = e;
+    const n = Object.entries(t), r = n.length > We ? Object.fromEntries(n.slice(-We)) : t;
+    localStorage.setItem(_t, JSON.stringify(r));
+  } catch {
+  }
+}
+function cs(s) {
+  return bt()[s];
+}
+function yt(s) {
+  return s.type === "single" ? s.fixture.id : s.id;
+}
+function ls(s, e) {
+  const t = new Array(s.length);
+  let n = ae;
+  for (let r = 0; r < s.length; r++) {
+    const i = e.get(yt(s[r])) ?? os;
+    t[r] = { top: n, height: i }, n += i + as;
+  }
+  return t;
+}
+function hs(s) {
+  if (s.length === 0) return 0;
+  const e = s[s.length - 1];
+  return e.top + e.height + ae;
+}
+function xt(s, e) {
+  let t = 0, n = s.length;
+  for (; t < n; ) {
+    const r = t + n >> 1;
+    s[r].top + s[r].height < e ? t = r + 1 : n = r;
+  }
+  return t;
+}
+function us(s, e, t) {
+  if (s.length === 0) return { start: 0, end: 0 };
+  const n = xt(s, e - Ge);
+  let r = n;
+  const i = e + t + Ge;
+  for (; r < s.length && s[r].top < i; )
+    r++;
+  return { start: n, end: r };
+}
+function qe(s, e) {
+  if (s.length === 0) return;
+  const t = xt(s, e), n = Math.min(t, s.length - 1);
+  return {
+    rowIndex: n,
+    offsetFromViewport: s[n].top - e
+  };
+}
+function Ke(s, e) {
+  return e.rowIndex >= s.length ? 0 : s[e.rowIndex].top - e.offsetFromViewport;
+}
+class fs extends z({
+  model: u.const()
+}) {
+  constructor() {
+    super(...arguments);
+    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", F(this, (t) => {
+      const n = this.explorerModel.selectedFixtures.read(t), r = this._rowHeights.read(t);
+      return ls(n, r);
+    }));
+    l(this, "visibleRowRange", F(this, (t) => {
+      const n = this.layout.read(t), r = this._scrollTop.read(t), i = this._viewportHeight.read(t);
+      return us(n, r, i);
+    }));
+    l(this, "setScrollContainerRef", (t) => {
+      var n;
+      this._scrollContainerRef && this._scrollContainerRef.removeEventListener("scroll", this._handleScroll), (n = this._viewportResizeObserver) == null || n.disconnect(), this._scrollContainerRef = t, t && (t.addEventListener("scroll", this._handleScroll, { passive: !0 }), this._viewportHeight.set(t.clientHeight, void 0), this._viewportResizeObserver = new ResizeObserver(([r]) => {
+        this._viewportHeight.set(Math.round(r.contentRect.height), void 0);
+      }), this._viewportResizeObserver.observe(t), this._restoreScrollPosition());
+    });
+    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 = qe(t, this._scrollTop.get());
+        n && ds(this._currentNodeId, n);
+      }, 150)));
+    });
+    l(this, "observeRowElement", (t, n) => {
+      t && (this._resizeObserver || (this._resizeObserver = new ResizeObserver((r) => {
+        const i = this._rowHeights.get();
+        let o;
+        for (const d of r) {
+          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), rs(c, h));
+        }
+        if (o) {
+          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 = Ke(h, c);
+            this._suppressScrollHandler = !0, this._scrollContainerRef.scrollTop = m, this._scrollTop.set(m, void 0), requestAnimationFrame(() => {
+              this._suppressScrollHandler = !1;
+            });
+          }
+        }
+      })), t.setAttribute("data-row-id", n), this._resizeObserver.observe(t));
+    });
+  }
+  get explorerModel() {
+    return this.props.model;
+  }
+  updateForSelection(t) {
+    this._currentNodeId !== t && (this._currentNodeId = t, this._restoreScrollPosition());
+  }
+  _restoreScrollPosition() {
+    if (!this._scrollContainerRef || !this._currentNodeId) return;
+    const t = cs(this._currentNodeId);
+    if (!t) return;
+    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;
+    });
+  }
+  dispose() {
+    var t, n;
+    (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 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) {
+      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: (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,
+              items: c.items,
+              daemon: e.explorerModel.daemon,
+              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
+        },
+        g
+      );
+    }) }) });
+  }
+), gs = k(
+  { row: u.const() },
+  (s, e) => {
+    const t = e.row;
+    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)) })
+    ] });
+  }
+), N = {
+  scrollContainer: {
+    flex: 1,
+    overflow: "auto",
+    backgroundColor: "var(--vscode-editor-background)"
+  },
+  emptyState: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-editor-background)"
+  },
+  emptyText: {
+    color: "var(--vscode-descriptionForeground)",
+    fontSize: "14px"
+  },
+  variantsHeader: {
+    marginBottom: "12px"
+  },
+  variantsTitle: {
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "var(--vscode-foreground)"
+  },
+  variantsContent: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: "16px"
+  }
+}, 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__ */ 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 })
+    ] });
+  }
+);
+var vs = class be {
+  constructor(e) {
+    this.iterator = e;
+  }
+  static fromIterable(e) {
+    return new be(e[Symbol.asyncIterator]());
+  }
+  static fromFn(e) {
+    return new be(e());
+  }
+  [Symbol.asyncIterator]() {
+    return this.iterator;
+  }
+}, _s = class extends Error {
+  constructor(s, e, t) {
+    super(t), this.statusCode = s, this.method = e, this.name = "ApiError";
+  }
+}, bs = class {
+  constructor(s) {
+    l(this, "methods", this._createProxy(""));
+    this._request = s;
+  }
+  _createProxy(s) {
+    return new Proxy(() => {
+    }, {
+      apply: async (e, t, n) => await this._request(s, n[0]),
+      get: (e, t) => this._createProxy(`${s}${s ? "/" : ""}${t}`)
+    });
+  }
+};
+function ys(s, e) {
+  return new bs(async (t, n) => {
+    var d;
+    const r = await fetch(`${s}/${t}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(d = e == null ? void 0 : e.getHeaders) == null ? void 0 : d.call(e)
+      },
+      body: JSON.stringify(n)
+    });
+    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 _s(r.status, t, h);
+    }
+    const i = r.headers.get("Content-Type");
+    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: v, value: E } = await c.read();
+        if (v)
+          break;
+        h += m.decode(E, { stream: !0 });
+        let V;
+        for (; (V = h.indexOf(`
+`)) >= 0; ) {
+          const S = h.slice(0, V).trim();
+          h = h.slice(V + 1), S.length > 0 && (yield JSON.parse(S));
+        }
+      }
+      const _ = h.trim();
+      _.length > 0 && (yield JSON.parse(_));
+    }) : await r.json();
+  });
+}
+class xs {
+  constructor(e) {
+    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);
+    l(this, "sessionName");
+    /** Observable map of sessionName → current sourceTreeId */
+    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 = ys("/__explorer/daemon-api");
+  }
+  /**
+   * Initializes the model: fetches initial session info and starts listening to events.
+   * Call this once after construction.
+   */
+  async initialize() {
+    await this._fetchSessionInfos(), this._startEventStream();
+  }
+  /**
+   * Get a screenshot for a fixture in a session, using cache when available.
+   * Cache is keyed on sessionName + fixtureId and invalidated when sourceTreeId changes.
+   */
+  async getScreenshot(e, t) {
+    const n = this._sourceTreeIds.get().get(e);
+    if (!n)
+      throw new Error(`No sourceTreeId known for session '${e}'`);
+    const r = `${e}:${t}`, i = this._screenshotCache.get(r);
+    if (i && i.sourceTreeId === n)
+      return i.data;
+    const o = await this._client.methods.screenshots.take({
+      fixtureId: t,
+      sessionName: e,
+      sourceTreeId: n,
+      includeImage: !0
+    });
+    return this._screenshotCache.set(r, { sourceTreeId: n, data: o }), o;
+  }
+  /**
+   * Compare a fixture across two sessions. Returns match status and hashes (no images).
+   */
+  async compare(e, t, n) {
+    const r = this._sourceTreeIds.get().get(t), i = this._sourceTreeIds.get().get(n);
+    if (!r || !i)
+      throw new Error("Missing sourceTreeId for sessions");
+    return this._client.methods.screenshots.compare({
+      fixtureId: e,
+      baselineSessionName: t,
+      baselineSourceTreeId: r,
+      currentSessionName: n,
+      currentSourceTreeId: i,
+      includeImages: !1
+    });
+  }
+  /**
+   * List fixtures from a session.
+   */
+  async listFixtures(e) {
+    const t = this._sourceTreeIds.get().get(e);
+    if (!t)
+      throw new Error(`No sourceTreeId known for session '${e}'`);
+    return this._client.methods.fixtures.list({ sessionName: e, sourceTreeId: t });
+  }
+  /**
+   * Get the explorer URL for a different session (for session switching via full navigation).
+   */
+  getSessionExplorerUrl(e) {
+    const t = this._sessions.get().find((n) => n.name === e);
+    if (t)
+      return t.serverUrl + "/___explorer";
+  }
+  dispose() {
+    var e;
+    (e = this._eventStreamAbort) == null || e.abort(), this._eventStreamAbort = null;
+  }
+  // ---------------------------------------------------------------------------
+  // Private
+  // ---------------------------------------------------------------------------
+  async _fetchSessionInfos() {
+    const e = await this._client.methods.sessions(), t = /* @__PURE__ */ new Map(), n = [];
+    for (const r of e)
+      t.set(r.name, r.sourceTreeId), n.push({ name: r.name, serverUrl: r.serverUrl });
+    this._sourceTreeIds.set(t, void 0), this._sessions.set(n, void 0);
+  }
+  async _startEventStream() {
+    this._eventStreamAbort = new AbortController();
+    const e = this._eventStreamAbort.signal;
+    try {
+      const t = await this._client.methods.events();
+      for await (const n of t) {
+        if (e.aborted) break;
+        this._handleEvent(n);
+      }
+    } catch (t) {
+      e.aborted || (console.error("[DaemonModel] Event stream error:", t), setTimeout(() => {
+        e.aborted || this._startEventStream();
+      }, 2e3));
+    }
+  }
+  _handleEvent(e) {
+    if (e.type === "source-change") {
+      const t = new Map(this._sourceTreeIds.get());
+      t.set(e.sessionName, e.sourceTreeId), this._sourceTreeIds.set(t, void 0);
+      for (const n of this._screenshotCache.keys())
+        n.startsWith(`${e.sessionName}:`) && this._screenshotCache.delete(n);
+    }
+  }
+}
+function Cs() {
+  return window.__EXPLORER_DAEMON__;
+}
+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 un());
+    l(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 = Cs();
+    if (!e)
+      return;
+    const t = new xs(e);
+    return t.initialize().catch((n) => {
+      console.error("[ExplorerApp] Failed to initialize DaemonModel:", n);
+    }), t;
+  }
+  _populateRegistry(e) {
+    this._registry.clear();
+    for (const [t, n] of Object.entries(e)) {
+      const r = n.default;
+      r && typeof r == "object" && this._registry.register(t, r);
+    }
+  }
+  /**
+   * Updates the fixtures. The UI will update automatically since the registry is observable.
+   */
+  updateFixtures(e) {
+    this._populateRegistry(e);
+  }
+  /**
+   * No-op for ExplorerApp (only meaningful for CliRuntime).
+   * Present so the plugin's HMR wiring can call it polymorphically.
+   */
+  bumpVersion() {
+  }
+  /**
+   * Unmounts the explorer and cleans up resources.
+   */
+  dispose() {
+    var e;
+    (e = this._daemonModel) == null || e.dispose(), this._root.unmount();
+  }
+}
+export {
+  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,
+  Bn as LeftSidebar,
+  Dn as MoonIcon,
+  kn as PanelLeftIcon,
+  Vn as PanelRightIcon,
+  Ss as ReportModel,
+  Ln as RightSidebar,
+  Nn as SunIcon,
+  Fn as TitleBar,
+  ce as TitleBarButton,
+  An as TreeItem,
+  ut as TreeView,
+  Vt as VIEWPORT_SIZES,
+  Ft as collectComponents,
+  Me as createComponentDefinition,
+  le as createFixtureTree,
+  Hs as defineFixture,
+  Ls as defineFixtureGroup,
+  Us as defineFixtureVariants,
+  Fe as findNodeByPath,
+  ke as fixtureGroupBrand,
+  Ve as fixtureVariantsBrand,
+  Dt as getDefaultPropertyValues,
+  Es as isComponentDefinition,
+  Ce as isFixtureGroup,
+  Se as isFixtureVariants,
+  xe as isSingleFixture,
+  Te as mergeStyles,
+  Ns as parseFixtureExport,
+  Ms as parseFixtureGroup,
+  Fs as parseFixtureVariants,
+  Ds as parseSingleFixture,
+  Nt as resolveViewport,
+  Ne as singleFixtureBrand,
+  p as styles,
+  ht as toExplorerTree
+};
+//# sourceMappingURL=viewer.js.map