@vscode/component-explorer 0.2.1-7 → 0.2.1-8

package/dist/viewer.js

@@ -1,8 +1,8 @@
 var Qo = Object.defineProperty;
 var Ko = (r, e, o) => e in r ? Qo(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o;
 var l = (r, e, o) => Ko(r, typeof e != "symbol" ? e + "" : e, o);
-import { f as De, c as Ne, s as Ae, S as me, r as ae, _ as Jo } from "./runtimeVersion-CESTXB4A.js";
-import { e as zt, d as Pt, a as Wt, b as $t, g as jt } from "./runtimeVersion-CESTXB4A.js";
+import { f as De, c as Ne, s as Ae, S as me, r as ae, _ as Jo } from "./runtimeVersion-C3nZZ7xj.js";
+import { e as Pt, d as Wt, a as jt, b as $t, g as Ut } from "./runtimeVersion-C3nZZ7xj.js";
 import { createRoot as Yo } from "react-dom/client";
 import * as uo from "react";
 import { createContext as mo, useReducer as Zo, useState as Xo, useContext as er, useEffect as Ge, createElement as or } from "react";
@@ -17,16 +17,16 @@ function Re(r) {
 function Ee(r) {
   return typeof r == "object" && r !== null && Ne in r && r[Ne] === !0 && "_variants" in r && typeof r._variants == "object";
 }
-function Mt(r) {
+function Ot(r) {
   return Ie(r) ? { success: !0, data: r } : Re(r) ? { success: !0, data: r } : Ee(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a valid fixture export (missing brand symbol or _options/_entries/_variants)" };
 }
-function Ot(r) {
+function Vt(r) {
   return Ie(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a SingleFixtureExport" };
 }
-function Vt(r) {
+function Lt(r) {
   return Re(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a FixtureGroupExport" };
 }
-function Lt(r) {
+function Dt(r) {
   return Ee(r) ? { success: !0, data: r } : { success: !1, error: "Value is not a FixtureVariantsExport" };
 }
 function ze(r, e, o, n, t = []) {
@@ -45,7 +45,7 @@ function ze(r, e, o, n, t = []) {
     render: i.render
   };
 }
-function Dt(r) {
+function Nt(r) {
   return typeof r == "object" && r !== null && "render" in r && typeof r.render == "function" && "id" in r && "name" in r;
 }
 class M {
@@ -124,7 +124,7 @@ function xo(r, e, o, n = [], t = "", i = []) {
     s.push(b);
     const _ = new M(s.join("/"));
     let y = (g = a.children) == null ? void 0 : g.find(
-      (v) => v.type === "folder" && v.name === b
+      (k) => k.type === "folder" && k.name === b
     );
     y || (y = {
       id: _,
@@ -158,7 +158,7 @@ function xo(r, e, o, n = [], t = "", i = []) {
       labels: [...o._labels ?? []]
     }, a.children || (a.children = []), a.children.push(x));
     for (const [b, _] of Object.entries(o._entries)) {
-      const y = o._expectedVisualDescriptions, v = y ? typeof y == "string" ? [y] : [...y] : [], C = [...i, ...v];
+      const y = o._expectedVisualDescriptions, k = y ? typeof y == "string" ? [y] : [...y] : [], C = [...i, ...k];
       xo(x, [b], _, s, t, C);
     }
   } else if (Ee(o)) {
@@ -171,14 +171,14 @@ function xo(r, e, o, n = [], t = "", i = []) {
     };
     a.children || (a.children = []), a.children.push(x);
     for (const [b, _] of Object.entries(o._variants)) {
-      const y = o._expectedVisualDescriptions, v = y ? typeof y == "string" ? [y] : [...y] : [], C = [...i, ...v], F = new M([...s, b].join("/")), k = {
+      const y = o._expectedVisualDescriptions, k = y ? typeof y == "string" ? [y] : [...y] : [], C = [...i, ...k], F = new M([...s, b].join("/")), v = {
         id: F,
         name: b,
         type: "component",
         component: ze(_, F.value, b, t, C),
         labels: [..._._options.labels ?? []]
       };
-      x.children.push(k);
+      x.children.push(v);
     }
   }
 }
@@ -201,12 +201,12 @@ function ir(r) {
     e.push(...ir(o));
   return e;
 }
-let P;
+let z;
 function ar(r) {
-  P ? P instanceof $e ? P.loggers.push(r) : P = new $e([P, r]) : P = r;
+  z ? z instanceof je ? z.loggers.push(r) : z = new je([z, r]) : z = r;
 }
 function B() {
-  return P;
+  return z;
 }
 let xe;
 function cr(r) {
@@ -215,7 +215,7 @@ function cr(r) {
 function sr(r) {
   xe && xe(r);
 }
-class $e {
+class je {
   constructor(e) {
     this.loggers = e;
   }
@@ -320,7 +320,7 @@ function dr(r) {
       id: r
     };
 }
-class G {
+class A {
   constructor(e, o, n) {
     this.owner = e, this.debugNameSource = o, this.referenceFn = n;
   }
@@ -328,15 +328,15 @@ class G {
     return lr(e, this);
   }
 }
-const je = /* @__PURE__ */ new Map(), be = /* @__PURE__ */ new WeakMap();
+const $e = /* @__PURE__ */ new Map(), be = /* @__PURE__ */ new WeakMap();
 function lr(r, e) {
   const o = be.get(r);
   if (o)
     return o;
   const n = pr(r, e);
   if (n) {
-    let t = je.get(n) ?? 0;
-    t++, je.set(n, t);
+    let t = $e.get(n) ?? 0;
+    t++, $e.set(n, t);
     const i = t === 1 ? n : `${n}#${t}`;
     return be.set(r, i), i;
   }
@@ -493,9 +493,9 @@ function wo(r) {
     dispose: r
   };
 }
-class $ extends Error {
+class W extends Error {
   constructor(e) {
-    super(e || "An unexpected bug occurred."), Object.setPrototypeOf(this, $.prototype);
+    super(e || "An unexpected bug occurred."), Object.setPrototypeOf(this, W.prototype);
   }
 }
 function se(r) {
@@ -629,7 +629,7 @@ class j extends Me {
   // IObserver Implementation
   beginUpdate(e) {
     if (this._isUpdating)
-      throw new $("Cyclic deriveds are not supported yet!");
+      throw new W("Cyclic deriveds are not supported yet!");
     this._updateCount++, this._isUpdating = !0;
     try {
       const o = this._updateCount === 1;
@@ -686,7 +686,7 @@ class j extends Me {
   // IReader Implementation
   _ensureReaderValid() {
     if (!this._isReaderValid)
-      throw new $("The reader object cannot be used outside its compute function!");
+      throw new W("The reader object cannot be used outside its compute function!");
   }
   readObservable(e) {
     this._ensureReaderValid(), e.addObserver(this);
@@ -736,17 +736,17 @@ class j extends Me {
   }
 }
 function I(r, e, o = O.ofCaller()) {
-  return e !== void 0 ? new j(new G(r, void 0, e), e, void 0, void 0, oe, o) : new j(new G(void 0, void 0, r), r, void 0, void 0, oe, o);
+  return e !== void 0 ? new j(new A(r, void 0, e), e, void 0, void 0, oe, o) : new j(new A(void 0, void 0, r), r, void 0, void 0, oe, o);
 }
 function yr(r, e, o = O.ofCaller()) {
-  return new j(new G(r.owner, r.debugName, r.debugReferenceFn), e, void 0, r.onLastObserverRemoved, r.equalsFn ?? oe, o);
+  return new j(new A(r.owner, r.debugName, r.debugReferenceFn), e, void 0, r.onLastObserverRemoved, r.equalsFn ?? oe, o);
 }
 mr(yr);
 function wr(r, e, o = O.ofCaller()) {
   let n, t;
   n = r, t = void 0;
   let i;
-  return new j(new G(t, void 0, n), (a) => {
+  return new j(new A(t, void 0, n), (a) => {
     i ? i.clear() : i = new re();
     const s = n(a);
     return s && i.add(s), s;
@@ -854,7 +854,7 @@ class Bo {
   // IReader implementation
   _ensureNoRunning() {
     if (!this._isRunning)
-      throw new $("The reader object cannot be used outside its compute function!");
+      throw new W("The reader object cannot be used outside its compute function!");
   }
   readObservable(e) {
     if (this._ensureNoRunning(), this._disposed)
@@ -865,12 +865,12 @@ class Bo {
   }
   get store() {
     if (this._ensureNoRunning(), this._disposed)
-      throw new $("Cannot access store after dispose");
+      throw new W("Cannot access store after dispose");
     return this._store === void 0 && (this._store = new re()), this._store;
   }
   get delayedStore() {
     if (this._ensureNoRunning(), this._disposed)
-      throw new $("Cannot access store after dispose");
+      throw new W("Cannot access store after dispose");
     return this._delayedStore === void 0 && (this._delayedStore = new re()), this._delayedStore;
   }
   debugGetState() {
@@ -887,7 +887,7 @@ class Bo {
   }
 }
 function _o(r, e = O.ofCaller()) {
-  return new Bo(new G(void 0, void 0, r), r, void 0, e);
+  return new Bo(new A(void 0, void 0, r), r, void 0, e);
 }
 function Qe(r) {
   const e = new Error("BugIndicatingErrorRecovery: " + r);
@@ -940,7 +940,7 @@ class So {
 }
 function w(r, e, o = O.ofCaller()) {
   let n;
-  return typeof r == "string" ? n = new G(void 0, r, void 0) : n = new G(r, void 0, void 0), new Fo(n, e, oe, o);
+  return typeof r == "string" ? n = new A(void 0, r, void 0) : n = new A(r, void 0, void 0), new Fo(n, e, oe, o);
 }
 class Fo extends Me {
   get debugName() {
@@ -986,9 +986,9 @@ class Fo extends Me {
 }
 function Ke(...r) {
   let e, o, n, t;
-  return r.length === 2 ? [o, n] = r : [e, o, n, t] = r, new W(new G(e, void 0, n), o, n, () => W.globalTransaction, oe, t ?? O.ofCaller());
+  return r.length === 2 ? [o, n] = r : [e, o, n, t] = r, new P(new A(e, void 0, n), o, n, () => P.globalTransaction, oe, t ?? O.ofCaller());
 }
-class W extends Me {
+class P extends Me {
   constructor(e, o, n, t, i, a) {
     super(a), this._debugNameData = e, this.event = o, this._getValue = n, this._getTransaction = t, this._equalityComparator = i, this._hasValue = !1, this.handleEvent = (s) => {
       var x;
@@ -1029,14 +1029,14 @@ class W extends Me {
   }
 }
 (function(r) {
-  r.Observer = W;
+  r.Observer = P;
   function e(o, n) {
     let t = !1;
-    W.globalTransaction === void 0 && (W.globalTransaction = o, t = !0);
+    P.globalTransaction === void 0 && (P.globalTransaction = o, t = !0);
     try {
       n();
     } finally {
-      t && (W.globalTransaction = void 0);
+      t && (P.globalTransaction = void 0);
     }
   }
   r.batchEventsGlobally = e;
@@ -1338,7 +1338,7 @@ class H {
     } else if (e instanceof Fo) {
       const n = e.debugGetState();
       return new H(e, o(e.debugName), "observableValue", n.value, "upToDate", []);
-    } else if (e instanceof W) {
+    } else if (e instanceof P) {
       const n = e.debugGetState();
       return new H(e, o(e.debugName), "fromEvent", n.value, n.hasValue ? "upToDate" : "initial", []);
     }
@@ -1461,7 +1461,7 @@ class zr {
 function Pr(r) {
   return r[fe] || (r[fe] = mo(void 0)), r[fe];
 }
-function D(r = {}) {
+function L(r = {}) {
   var e;
   return e = class extends zr {
   }, e._props = r, e;
@@ -1479,8 +1479,8 @@ const Wr = new Dr((r) => {
         e.rendered || e.forceUpdate();
     });
 });
-let $r = 0;
-class jr {
+let jr = 0;
+class $r {
   constructor(e, o) {
     this.debugName = e, this.renderFactory = o, 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;
@@ -1500,7 +1500,7 @@ class jr {
   }
 }
 function Oe(r, e, o) {
-  const n = (a) => a + 1, t = () => new jr(r + ++$r, e), i = function(a) {
+  const n = (a) => a + 1, t = () => new $r(r + ++jr, e), i = function(a) {
     const s = Zo(n, 0)[1], d = Xo(t)[0];
     for (const p of o ?? [])
       d.contextValues.set(p, er(p));
@@ -1535,17 +1535,17 @@ function Ur(r) {
   }
   return e;
 }
-function N(r, e, o) {
+function D(r, e, o) {
   const n = typeof e == "function" ? {} : e, t = typeof e == "function" ? e : o, i = "_props" in r ? r._props : {}, a = Ur({ ...i, ...n }), s = Pr(r), d = [...a, s];
   return Oe("viewWithModel", (p, g) => {
-    const f = g(), x = f.get(s), b = "_props" in r ? Z(r._props, (v, C) => v.create((F) => p.read(F)[C], f.get(v._requiredContext))) : {}, _ = x ? { read: () => x, dispose: () => {
-    } } : wr((v) => {
-      const C = Z(b, (F) => F.read(v));
+    const f = g(), x = f.get(s), b = "_props" in r ? Z(r._props, (k, C) => k.create((F) => p.read(F)[C], f.get(k._requiredContext))) : {}, _ = x ? { read: () => x, dispose: () => {
+    } } : wr((k) => {
+      const C = Z(b, (F) => F.read(k));
       return new r(C);
-    }), y = Z(n, (v, C) => v.create((F) => p.read(F)[C], f.get(v._requiredContext)));
-    return (v) => {
-      const C = _.read(v), F = Z(y, (k) => k.read(v));
-      return t(v, C, F);
+    }), y = Z(n, (k, C) => k.create((F) => p.read(F)[C], f.get(k._requiredContext)));
+    return (k) => {
+      const C = _.read(k), F = Z(y, (v) => v.read(k));
+      return t(k, C, F);
     };
   }, d.length > 0 ? d : void 0);
 }
@@ -1629,7 +1629,7 @@ function Ho(r, e) {
   const o = new URLSearchParams(location.search);
   return o.set(r, e), location.pathname + "?" + o.toString();
 }
-class Kr extends D({
+class Kr extends L({
   registry: m.const(),
   daemonModel: m.const(),
   reportModel: m.const()
@@ -2034,7 +2034,7 @@ const h = {
 function Ve(...r) {
   return Object.assign({}, ...r.filter(Boolean));
 }
-class Jr extends D({
+class Jr extends L({
   active: m()
 }) {
   constructor() {
@@ -2048,7 +2048,7 @@ class Jr extends D({
     return this.props.active;
   }
 }
-const he = N(
+const he = D(
   Jr,
   {
     onClick: m.const(),
@@ -2230,7 +2230,7 @@ const dn = {
   },
   (r, e) => /* @__PURE__ */ c(Fe, { children: e.nodes.map((o) => /* @__PURE__ */ c(pn, { model: e.model, node: o, depth: e.depth }, o.id.value)) })
 );
-class ln extends D({
+class ln extends L({
   model: m.const(),
   node: m.const(),
   depth: m.const()
@@ -2265,7 +2265,7 @@ class ln extends D({
     return !!(this.props.node.children && this.props.node.children.length > 0);
   }
 }
-const pn = N(ln, {}, (r, e) => {
+const pn = D(ln, {}, (r, e) => {
   const o = e.explorerModel, n = e.treeNode, t = e.treeDepth, i = !!(n.children && n.children.length > 0), a = i ? o.isNodeExpanded(n.id.value, r) : !1, d = o.selectedNodeId.read(r) === n.id.value, p = e.isHovered.read(r), g = Ve(
     h.treeItem,
     { paddingLeft: `${8 + t * 12}px` },
@@ -2379,7 +2379,7 @@ const pn = N(ln, {}, (r, e) => {
     ] });
   }
 );
-class bn extends D({}) {
+class bn extends L({}) {
   constructor() {
     super(...arguments);
     l(this, "checked", w(this, !1));
@@ -2388,7 +2388,7 @@ class bn extends D({}) {
     });
   }
 }
-const vn = N(bn, {}, (r, e) => {
+const vn = D(bn, {}, (r, e) => {
   const o = e.checked.read(r), n = {
     position: "relative",
     width: "36px",
@@ -2593,7 +2593,7 @@ function Fn(r, e, o) {
     o.adoptedStyleSheets = o.adoptedStyleSheets.filter((t) => t !== n);
 }
 class Le {
-  constructor(e, o, n) {
+  constructor(e, o) {
     l(this, "renderTarget");
     l(this, "iframe", null);
     l(this, "_abortController", new AbortController());
@@ -2601,31 +2601,33 @@ class Le {
     l(this, "_injectedElements", []);
     l(this, "_adoptedSheets", []);
     l(this, "_styleTarget", document);
+    l(this, "_disposables", []);
     l(this, "_rendered");
-    l(this, "_onError");
-    l(this, "_errorReported", !1);
-    l(this, "error");
-    this.component = o, this._onError = n == null ? void 0 : n.onError;
-    const t = o.isolation;
-    if (t === "shadow-dom") {
-      const a = e.attachShadow({ mode: "open" });
-      if (this._styleTarget = a, o.styles) {
-        const { injectedElements: s, adoptedSheets: d } = Xe(o.styles, a);
-        this._injectedElements = s, this._adoptedSheets = d;
+    this.component = o;
+    const n = o.isolation;
+    if (n === "shadow-dom") {
+      const i = e.attachShadow({ mode: "open" });
+      if (this._styleTarget = i, o.styles) {
+        const { injectedElements: a, adoptedSheets: s } = Xe(o.styles, i);
+        this._injectedElements = a, this._adoptedSheets = s;
       }
-      this.renderTarget = document.createElement("div"), a.appendChild(this.renderTarget);
-    } else if (t === "iframe") {
-      const a = document.createElement("iframe");
-      a.style.border = "none", a.style.display = "block", a.style.width = "100%", a.style.height = (Cn(o.id) ?? 0) + "px";
-      const s = new URL(location.pathname, location.origin);
-      s.searchParams.set("mode", "embedded"), s.searchParams.set("fixture", o.id), s.searchParams.set("file", o.sourceFile), a.src = s.toString(), e.appendChild(a), this.iframe = a;
+      this.renderTarget = document.createElement("div"), i.appendChild(this.renderTarget);
+    } else if (n === "iframe") {
+      const i = document.createElement("iframe");
+      i.style.border = "none", i.style.display = "block", i.style.width = "100%", i.style.height = (Cn(o.id) ?? 0) + "px";
+      const a = new URL(location.pathname, location.origin);
+      a.searchParams.set("mode", "embedded"), a.searchParams.set("fixture", o.id), a.searchParams.set("file", o.sourceFile), i.src = a.toString(), e.appendChild(i), this.iframe = i;
+      let s;
       const d = (p) => {
         var g, f, x;
-        if (p.source === a.contentWindow)
+        if (p.source === i.contentWindow)
           if (((g = p.data) == null ? void 0 : g.type) === "component-explorer:resize") {
             const b = p.data.height;
-            a.style.height = b + "px", _n(o.id, b);
-          } else ((f = p.data) == null ? void 0 : f.type) === "component-explorer:error" ? this._reportError(p.data.error) : ((x = p.data) == null ? void 0 : x.type) === "component-explorer:console" && de.getInstance().addEvent(
+            i.style.height = b + "px", _n(o.id, b);
+          } else if (((f = p.data) == null ? void 0 : f.type) === "component-explorer:error") {
+            const b = p.data.error;
+            this._resolvedResult = { error: b }, s == null || s(b), s = void 0;
+          } else ((x = p.data) == null ? void 0 : x.type) === "component-explorer:console" && de.getInstance().addEvent(
             p.data.eventType,
             p.data.message,
             p.data.stack
@@ -2633,44 +2635,45 @@ class Le {
       };
       window.addEventListener("message", d), this._abortController.signal.addEventListener("abort", () => {
         window.removeEventListener("message", d);
-      }), this.renderTarget = a, this._rendered = Promise.resolve(void 0);
+      }), this.renderTarget = i, this._rendered = new Promise((p, g) => {
+        s = g;
+      });
       return;
     } else {
       if (o.styles) {
-        const { injectedElements: a, adoptedSheets: s } = Xe(o.styles, document);
-        this._injectedElements = a, this._adoptedSheets = s;
+        const { injectedElements: i, adoptedSheets: a } = Xe(o.styles, document);
+        this._injectedElements = i, this._adoptedSheets = a;
       }
       this.renderTarget = document.createElement("div"), e.appendChild(this.renderTarget);
     }
-    let i;
+    let t;
     try {
-      i = o.render(this.renderTarget, {
-        signal: this._abortController.signal
+      t = o.render(this.renderTarget, {
+        signal: this._abortController.signal,
+        addDisposable: (i) => (this._disposables.push(i), i)
       });
-    } catch (a) {
-      this._reportError({
-        message: a instanceof Error ? a.message : String(a),
-        stack: a instanceof Error ? a.stack : void 0
-      }), this._rendered = Promise.resolve(void 0);
+    } catch (i) {
+      const a = {
+        message: i instanceof Error ? i.message : String(i),
+        stack: i instanceof Error ? i.stack : void 0
+      };
+      this._resolvedResult = { error: a }, this._rendered = Promise.reject(a);
       return;
     }
-    i instanceof Promise ? this._rendered = i.then((a) => {
-      var s;
+    t instanceof Promise ? this._rendered = t.then((i) => {
+      var a;
       if (this._abortController.signal.aborted) {
-        (s = a == null ? void 0 : a.dispose) == null || s.call(a);
+        (a = i == null ? void 0 : i.dispose) == null || a.call(i);
         return;
       }
-      return this._resolvedResult = a ?? void 0, this._resolvedResult;
-    }).catch((a) => {
-      this._reportError({
-        message: a instanceof Error ? a.message : String(a),
-        stack: a instanceof Error ? a.stack : void 0
-      });
-    }) : (this._resolvedResult = i ?? void 0, this._rendered = Promise.resolve(this._resolvedResult));
-  }
-  _reportError(e) {
-    var o;
-    this._errorReported || (this._errorReported = !0, this.error = e, (o = this._onError) == null || o.call(this, e));
+      return this._resolvedResult = i ?? void 0, this._resolvedResult;
+    }).catch((i) => {
+      const a = {
+        message: i instanceof Error ? i.message : String(i),
+        stack: i instanceof Error ? i.stack : void 0
+      };
+      throw this._resolvedResult = { error: a }, a;
+    }) : (this._resolvedResult = t ?? void 0, this._rendered = Promise.resolve(this._resolvedResult));
   }
   async waitForRendering() {
     const e = await this._rendered;
@@ -2678,7 +2681,10 @@ class Le {
   }
   dispose() {
     var e, o;
-    this._abortController.abort(), (o = (e = this._resolvedResult) == null ? void 0 : e.dispose) == null || o.call(e), this._resolvedResult = void 0, Fn(this._injectedElements, this._adoptedSheets, this._styleTarget);
+    this._abortController.abort(), this._resolvedResult && !("error" in this._resolvedResult) && ((o = (e = this._resolvedResult).dispose) == null || o.call(e)), this._resolvedResult = void 0;
+    for (const n of this._disposables)
+      n.dispose();
+    this._disposables.length = 0, Fn(this._injectedElements, this._adoptedSheets, this._styleTarget);
   }
 }
 let _e;
@@ -2707,7 +2713,7 @@ function Tn(r) {
   No.add(r);
 }
 let Hn = 0;
-class Mn extends D({
+class Mn extends L({
   fixture: m.const(),
   compact: m.const(),
   onSelect: m.const()
@@ -2733,10 +2739,10 @@ class Mn extends D({
       } else
         t.style.all = "initial", t.style.display = "inline-block";
       n.appendChild(t), this._fixtureContainer = t, Tn(t);
-      const s = new Le(t, i, {
-        onError: (d) => this.error.set(d, void 0)
-      });
-      this._rendering = s, this._resizeObserver = new ResizeObserver((d) => {
+      const s = new Le(t, i);
+      this._rendering = s, s.waitForRendering().catch((d) => {
+        this.error.set(d, void 0);
+      }), this._resizeObserver = new ResizeObserver((d) => {
         for (const p of d) {
           const { width: g, height: f } = p.contentRect;
           f > 0 && (this.measuredWidth.set(Math.round(g), void 0), this.measuredHeight.set(Math.round(f), void 0));
@@ -2761,7 +2767,7 @@ class Mn extends D({
     this._cleanup();
   }
 }
-const Ao = N(
+const Ao = D(
   Mn,
   {},
   (r, e) => {
@@ -2883,7 +2889,8 @@ const ne = {
     cursor: "pointer",
     textAlign: "left",
     fontFamily: "var(--component-explorer-editor-font-family, monospace)",
-    fontSize: "12px"
+    fontSize: "12px",
+    userSelect: "text"
   },
   chevron: {
     fontSize: "10px",
@@ -2893,7 +2900,8 @@ const ne = {
   },
   message: {
     color: "#f77",
-    wordBreak: "break-word"
+    wordBreak: "break-word",
+    userSelect: "text"
   },
   stack: {
     margin: 0,
@@ -2903,10 +2911,11 @@ const ne = {
     color: "var(--component-explorer-descriptionForeground)",
     whiteSpace: "pre-wrap",
     wordBreak: "break-word",
-    lineHeight: 1.4
+    lineHeight: 1.4,
+    userSelect: "text"
   }
 };
-class An extends D({
+class An extends L({
   fixtureId: m.const(),
   sessionName: m.const(),
   daemon: m.const()
@@ -2933,27 +2942,27 @@ class An extends D({
     }
   }
 }
-const oo = N(
+const oo = D(
   An,
   {},
   (r, e) => {
     var t;
     const o = e.screenshot.read(r);
     if (o.status === "idle" || o.status === "loading")
-      return /* @__PURE__ */ c("div", { style: z.placeholder, children: /* @__PURE__ */ c("div", { style: z.shimmer }) });
+      return /* @__PURE__ */ c("div", { style: G.placeholder, children: /* @__PURE__ */ c("div", { style: G.shimmer }) });
     if (o.status === "error")
-      return /* @__PURE__ */ c("div", { style: z.error, children: /* @__PURE__ */ c("span", { style: z.errorText, children: "Screenshot failed" }) });
+      return /* @__PURE__ */ c("div", { style: G.error, children: /* @__PURE__ */ c("span", { style: G.errorText, children: "Screenshot failed" }) });
     const { data: n } = o;
     return n.image ? /* @__PURE__ */ c(
       "img",
       {
         src: `data:image/png;base64,${n.image}`,
-        style: z.image,
+        style: G.image,
         alt: `Screenshot of ${e.fixtureId}`
       }
-    ) : /* @__PURE__ */ c("div", { style: z.placeholder, children: /* @__PURE__ */ c("span", { style: z.hashText, children: (t = n.hash) == null ? void 0 : t.slice(0, 12) }) });
+    ) : /* @__PURE__ */ c("div", { style: G.placeholder, children: /* @__PURE__ */ c("span", { style: G.hashText, children: (t = n.hash) == null ? void 0 : t.slice(0, 12) }) });
   }
-), z = {
+), G = {
   placeholder: {
     minHeight: 80,
     display: "flex",
@@ -2996,7 +3005,7 @@ const oo = N(
     border: "1px solid var(--component-explorer-panel-border)"
   }
 };
-class Gn extends D({
+class Gn extends L({
   fixtureId: m.const(),
   daemon: m.const(),
   baselineSession: m.const(),
@@ -3036,7 +3045,7 @@ class Gn extends D({
     }
   }
 }
-const zn = N(
+const zn = D(
   Gn,
   {},
   (r, e) => {
@@ -3163,10 +3172,10 @@ function zo(r, e) {
 const Wn = {
   backgroundColor: "#ffffff",
   backgroundImage: zo("#ffffff", "#e5e5e5")
-}, $n = {
+}, jn = {
   backgroundColor: "#1e1e1e",
   backgroundImage: zo("#1e1e1e", "#2d2d2d")
-}, jn = {
+}, $n = {
   display: "inline-block",
   padding: "12px",
   borderRadius: "4px",
@@ -3175,9 +3184,9 @@ const Wn = {
   boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)"
 };
 function Un(r) {
-  const e = r === "dark" ? $n : Wn;
+  const e = r === "dark" ? jn : Wn;
   return {
-    ...jn,
+    ...$n,
     backgroundColor: e.backgroundColor,
     backgroundImage: e.backgroundImage
   };
@@ -3328,14 +3337,14 @@ function Yn(r, e) {
 function Zn(r) {
   return Wo()[r];
 }
-function $o(r) {
+function jo(r) {
   return r.type === "single" ? r.fixture.id : r.id;
 }
 function Xn(r, e) {
   const o = new Array(r.length);
   let n = le;
   for (let t = 0; t < r.length; t++) {
-    const i = e.get($o(r[t])) ?? Kn;
+    const i = e.get(jo(r[t])) ?? Kn;
     o[t] = { top: n, height: i }, n += i + Jn;
   }
   return o;
@@ -3345,7 +3354,7 @@ function Ce(r) {
   const e = r[r.length - 1];
   return e.top + e.height + le;
 }
-function jo(r, e) {
+function $o(r, e) {
   let o = 0, n = r.length;
   for (; o < n; ) {
     const t = o + n >> 1;
@@ -3355,7 +3364,7 @@ function jo(r, e) {
 }
 function et(r, e, o) {
   if (r.length === 0) return { start: 0, end: 0 };
-  const n = jo(r, e - no);
+  const n = $o(r, e - no);
   let t = n;
   const i = e + o + no;
   for (; t < r.length && r[t].top < i; )
@@ -3364,7 +3373,7 @@ function et(r, e, o) {
 }
 function io(r, e) {
   if (r.length === 0) return;
-  const o = jo(r, e), n = Math.min(o, r.length - 1);
+  const o = $o(r, e), n = Math.min(o, r.length - 1);
   return {
     rowIndex: n,
     offsetFromViewport: r[n].top - e
@@ -3406,7 +3415,7 @@ function nt(r) {
     borderBottom: r === 0 ? "1px solid var(--component-explorer-widget-border, var(--component-explorer-panel-border, rgba(128,128,128,0.35)))" : void 0
   };
 }
-class tt extends D({
+class tt extends L({
   model: m.const()
 }) {
   constructor() {
@@ -3510,7 +3519,7 @@ class tt extends D({
     (o = this._resizeObserver) == null || o.disconnect(), (n = this._viewportResizeObserver) == null || n.disconnect(), this._scrollContainerRef && this._scrollContainerRef.removeEventListener("scroll", this._handleScroll), this._scrollSaveTimeout && clearTimeout(this._scrollSaveTimeout);
   }
 }
-const it = N(
+const it = D(
   tt,
   {},
   (r, e) => {
@@ -3520,37 +3529,37 @@ const it = N(
       if (d) {
         const p = d.state.read(r);
         if (p.status === "loading")
-          return /* @__PURE__ */ c("div", { style: L.emptyState, children: /* @__PURE__ */ c("span", { style: L.emptyText, children: "Loading report..." }) });
+          return /* @__PURE__ */ c("div", { style: V.emptyState, children: /* @__PURE__ */ c("span", { style: V.emptyText, children: "Loading report..." }) });
         if (p.status === "error")
-          return /* @__PURE__ */ c("div", { style: L.emptyState, children: /* @__PURE__ */ u("span", { style: { ...L.emptyText, color: "var(--component-explorer-errorForeground)" }, children: [
+          return /* @__PURE__ */ c("div", { style: V.emptyState, children: /* @__PURE__ */ u("span", { style: { ...V.emptyText, color: "var(--component-explorer-errorForeground)" }, children: [
             "Failed to load report: ",
             p.message
           ] }) });
       }
-      return /* @__PURE__ */ c("div", { style: L.emptyState, children: /* @__PURE__ */ c("span", { style: L.emptyText, children: "Select a component or folder to preview" }) });
+      return /* @__PURE__ */ c("div", { style: V.emptyState, children: /* @__PURE__ */ c("span", { style: V.emptyText, children: "Select a component or folder to preview" }) });
     }
     const s = Ce(t);
-    return /* @__PURE__ */ c("div", { ref: e.setScrollContainerRef, style: L.scrollContainer, children: /* @__PURE__ */ c("div", { style: { position: "relative", height: s }, children: o.slice(i, a).map((d, p) => {
-      const g = i + p, { top: f } = t[g], x = $o(d), b = so(co(d)), _ = g > 0 ? so(co(o[g - 1])) : void 0, y = ot(b, _, x);
+    return /* @__PURE__ */ c("div", { ref: e.setScrollContainerRef, style: V.scrollContainer, children: /* @__PURE__ */ c("div", { style: { position: "relative", height: s }, children: o.slice(i, a).map((d, p) => {
+      const g = i + p, { top: f } = t[g], x = jo(d), b = so(co(d)), _ = g > 0 ? so(co(o[g - 1])) : void 0, y = ot(b, _, x);
       return /* @__PURE__ */ u(
         "div",
         {
-          ref: (v) => e.observeRowElement(v, x),
+          ref: (k) => e.observeRowElement(k, x),
           style: { position: "absolute", top: f, left: le, right: le },
           children: [
-            y.map((v) => {
-              const C = rt(v.depth);
-              return /* @__PURE__ */ c(C, { style: nt(v.depth), children: /* @__PURE__ */ c(
+            y.map((k) => {
+              const C = rt(k.depth);
+              return /* @__PURE__ */ c(C, { style: nt(k.depth), children: /* @__PURE__ */ c(
                 "a",
                 {
-                  href: Ho("fixture", v.nodeId),
-                  style: L.headingLink,
+                  href: Ho("fixture", k.nodeId),
+                  style: V.headingLink,
                   onClick: (F) => {
-                    F.preventDefault(), e.explorerModel.selectNode(v.nodeId);
+                    F.preventDefault(), e.explorerModel.selectNode(k.nodeId);
                   },
-                  children: v.name
+                  children: k.name
                 }
-              ) }, v.depth);
+              ) }, k.depth);
             }),
             d.type === "single" ? /* @__PURE__ */ c(Ao, { fixture: d.fixture, compact: !1, onSelect: e.explorerModel.selectNode }) : d.type === "variants" ? /* @__PURE__ */ c(at, { row: d, onSelect: e.explorerModel.selectNode }) : d.type === "screenshot-comparison" && e.explorerModel.daemon ? /* @__PURE__ */ c(
               Pn,
@@ -3584,9 +3593,9 @@ const it = N(
   },
   (r, e) => {
     const o = e.row;
-    return /* @__PURE__ */ c("div", { style: L.variantsContent, children: o.fixtures.map((n) => /* @__PURE__ */ c(Ao, { fixture: n, compact: !0, onSelect: e.onSelect }, n.id)) });
+    return /* @__PURE__ */ c("div", { style: V.variantsContent, children: o.fixtures.map((n) => /* @__PURE__ */ c(Ao, { fixture: n, compact: !0, onSelect: e.onSelect }, n.id)) });
   }
-), L = {
+), V = {
   scrollContainer: {
     flex: 1,
     overflow: "auto",
@@ -3614,7 +3623,7 @@ const it = N(
     color: "inherit"
   }
 };
-class ct extends D({
+class ct extends L({
   store: m.const()
 }) {
   constructor() {
@@ -3631,28 +3640,28 @@ class ct extends D({
     this.store.clear();
   }
 }
-const st = N(
+const st = D(
   ct,
   { store: m.const() },
   (r, e) => {
     const o = e.store, n = o.events.read(r), t = o.errorCount.read(r), i = e.expanded.read(r);
-    return n.length === 0 ? null : /* @__PURE__ */ u("div", { style: A.container, children: [
+    return n.length === 0 ? null : /* @__PURE__ */ u("div", { style: N.container, children: [
       /* @__PURE__ */ u(
         "button",
         {
-          style: A.header,
+          style: N.header,
           onClick: () => e.toggleExpanded(),
           children: [
-            /* @__PURE__ */ u("span", { style: A.headerLeft, children: [
-              /* @__PURE__ */ c("span", { style: A.chevron, children: i ? "▼" : "▶" }),
+            /* @__PURE__ */ u("span", { style: N.headerLeft, children: [
+              /* @__PURE__ */ c("span", { style: N.chevron, children: i ? "▼" : "▶" }),
               /* @__PURE__ */ c("span", { children: "Console" }),
-              t > 0 && /* @__PURE__ */ c("span", { style: A.errorBadge, children: t }),
-              n.length > t && /* @__PURE__ */ c("span", { style: A.warnBadge, children: n.length - t })
+              t > 0 && /* @__PURE__ */ c("span", { style: N.errorBadge, children: t }),
+              n.length > t && /* @__PURE__ */ c("span", { style: N.warnBadge, children: n.length - t })
             ] }),
             /* @__PURE__ */ c(
               "button",
               {
-                style: A.clearButton,
+                style: N.clearButton,
                 onClick: (a) => {
                   a.stopPropagation(), e.clear();
                 },
@@ -3663,7 +3672,7 @@ const st = N(
           ]
         }
       ),
-      i && /* @__PURE__ */ c("div", { style: A.content, children: n.map((a) => /* @__PURE__ */ c(dt, { event: a }, a.id)) })
+      i && /* @__PURE__ */ c("div", { style: N.content, children: n.map((a) => /* @__PURE__ */ c(dt, { event: a }, a.id)) })
     ] });
   }
 );
@@ -3680,24 +3689,24 @@ function dt({ event: r }) {
       children: [
         /* @__PURE__ */ c("span", { style: Y.time, children: a }),
         /* @__PURE__ */ c("span", { style: { ...Y.type, color: n ? "#f77" : t ? "#fc0" : "#888" }, children: r.type.replace("window.", "").replace("console.", "") }),
-        /* @__PURE__ */ u(
-          "span",
-          {
-            style: { ...Y.message, cursor: r.stack ? "pointer" : "default" },
-            onClick: () => r.stack && o(!e),
-            title: r.stack ? "Click to toggle stack trace" : void 0,
-            children: [
-              r.message,
-              r.stack && /* @__PURE__ */ c("span", { style: Y.stackIndicator, children: " ▾" })
-            ]
-          }
-        ),
+        /* @__PURE__ */ u("span", { style: Y.message, children: [
+          r.message,
+          r.stack && /* @__PURE__ */ c(
+            "span",
+            {
+              style: Y.stackIndicator,
+              onClick: () => o(!e),
+              title: "Toggle stack trace",
+              children: e ? " ▴" : " ▾"
+            }
+          )
+        ] }),
         e && r.stack && /* @__PURE__ */ c("pre", { style: Y.stack, children: r.stack })
       ]
     }
   );
 }
-const A = {
+const N = {
   container: {
     borderTop: "1px solid var(--component-explorer-panel-border)",
     backgroundColor: "var(--component-explorer-editor-background)",
@@ -3758,7 +3767,9 @@ const A = {
   },
   content: {
     maxHeight: "200px",
-    overflowY: "auto"
+    overflowY: "auto",
+    userSelect: "text",
+    cursor: "text"
   }
 }, Y = {
   container: {
@@ -3784,7 +3795,9 @@ const A = {
   },
   stackIndicator: {
     fontSize: "10px",
-    opacity: 0.5
+    opacity: 0.5,
+    cursor: "pointer",
+    userSelect: "none"
   },
   stack: {
     gridColumn: "1 / -1",
@@ -3818,7 +3831,7 @@ const go = {
   borderTopColor: "transparent",
   borderRadius: "50%",
   animation: "explorer-spin 0.8s linear infinite"
-}, pt = N(
+}, pt = D(
   Kr,
   { daemonModel: m.const(), reportModel: m.const() },
   (r, e) => {
@@ -3917,11 +3930,11 @@ ${b}` : ""}`;
         if (_)
           break;
         g += f.decode(y, { stream: !0 });
-        let v;
-        for (; (v = g.indexOf(`
+        let k;
+        for (; (k = g.indexOf(`
 `)) >= 0; ) {
-          const C = g.slice(0, v).trim();
-          g = g.slice(v + 1), C.length > 0 && (yield JSON.parse(C));
+          const C = g.slice(0, k).trim();
+          g = g.slice(k + 1), C.length > 0 && (yield JSON.parse(C));
         }
       }
       const x = g.trim();
@@ -4161,7 +4174,8 @@ class wt {
     (e = this._daemonModel) == null || e.dispose(), this._root.unmount();
   }
 }
-class Bt {
+const Bt = window.setTimeout;
+class _t {
   constructor(e, o) {
     /** Random ID generated on construction — changes on full page reload. */
     l(this, "pageInstanceId", Math.random().toString(36).slice(2));
@@ -4203,6 +4217,8 @@ class Bt {
     this._currentRendering && (this._currentRendering.dispose(), this._currentRendering = void 0), this._currentContainer && (this._currentContainer.remove(), this._currentContainer = void 0);
   }
   async renderFixture(e) {
+    if (await this._loadPromise, this._loadError)
+      throw new Error(this._loadError);
     const o = this._findFixtureNode(this._root, e);
     if (!o || !o.component)
       throw new Error("Fixture not found: " + e);
@@ -4211,20 +4227,20 @@ class Bt {
     n.style.display = "inline-block", this._containerElement.appendChild(n), this._currentContainer = n;
     const t = o.component, i = [];
     let a;
-    const s = (k) => {
-      a || (a = k);
+    const s = (v) => {
+      a || (a = v);
     }, d = console.error, p = console.warn, g = console.log;
-    console.error = (...k) => {
-      i.push({ type: "console.error", message: k.map(String).join(" ") }), d.apply(console, k);
-    }, console.warn = (...k) => {
-      i.push({ type: "console.warn", message: k.map(String).join(" ") }), p.apply(console, k);
-    }, console.log = (...k) => {
-      i.push({ type: "console.log", message: k.map(String).join(" ") }), g.apply(console, k);
+    console.error = (...v) => {
+      i.push({ type: "console.error", message: v.map(String).join(" ") }), d.apply(console, v);
+    }, console.warn = (...v) => {
+      i.push({ type: "console.warn", message: v.map(String).join(" ") }), p.apply(console, v);
+    }, console.log = (...v) => {
+      i.push({ type: "console.log", message: v.map(String).join(" ") }), g.apply(console, v);
     };
-    const f = (k) => {
-      i.push({ type: "window.error", message: k.message });
-    }, x = (k) => {
-      const V = k.reason, ge = V instanceof Error ? V.message : String(V);
+    const f = (v) => {
+      i.push({ type: "window.error", message: v.message });
+    }, x = (v) => {
+      const $ = v.reason, ge = $ instanceof Error ? $.message : String($);
       i.push({ type: "window.unhandledrejection", message: ge });
     };
     window.addEventListener("error", f), window.addEventListener("unhandledrejection", x);
@@ -4232,20 +4248,21 @@ class Bt {
     const _ = performance.now();
     let y;
     try {
-      const k = new Le(n, t);
-      y = performance.now() - _, this._currentRendering = k;
-      const V = 3e3, ge = new Promise((St, qo) => setTimeout(() => qo(new Error(`Fixture timed out after ${V}ms`)), V)), ue = await Promise.race([k.waitForRendering(), ge]);
+      const v = new Le(n, t);
+      y = performance.now() - _, this._currentRendering = v;
+      const $ = 3e3, ge = new Promise(
+        (Ft, qo) => Bt(() => qo(new Error(`Fixture timed out after ${$}ms`)), $)
+      ), ue = await Promise.race([v.waitForRendering(), ge]);
       b = ue == null ? void 0 : ue.data;
-    } catch (k) {
-      const V = k instanceof Error ? k : new Error(String(k));
-      s({ message: V.message, stack: V.stack });
+    } catch (v) {
+      v instanceof Error ? s({ message: v.message, stack: v.stack }) : v && typeof v == "object" && "message" in v ? s({ message: String(v.message), stack: String(v.stack ?? "") || void 0 }) : s({ message: String(v) });
     } finally {
       console.error = d, console.warn = p, console.log = g;
     }
-    a || await new Promise((k) => requestAnimationFrame(() => requestAnimationFrame(() => k())));
-    const v = performance.now() - _;
+    a || await new Promise((v) => requestAnimationFrame(() => requestAnimationFrame(() => v())));
+    const k = performance.now() - _;
     window.removeEventListener("error", f), window.removeEventListener("unhandledrejection", x);
-    const C = !!a || i.some((k) => k.type !== "console.log" && k.type !== "console.warn"), F = { sync: Math.round(y ?? v), total: Math.round(v) };
+    const C = !!a || i.some((v) => v.type !== "console.log" && v.type !== "console.warn"), F = { sync: Math.round(y ?? k), total: Math.round(k) };
     return { hasError: C, error: a, events: i, resultData: b, renderTimeMs: F };
   }
   _buildTree(e) {
@@ -4287,7 +4304,7 @@ class Bt {
     window.__componentExplorer__ = o;
   }
 }
-class _t {
+class Ct {
   constructor(e, o, n) {
     l(this, "_root");
     l(this, "_rendering");
@@ -4355,10 +4372,10 @@ ${i}`, this._container.appendChild(a), this._postError({ message: t instanceof E
     try {
       const d = new Le(this._container, o);
       this._rendering = d, d.waitForRendering().catch((p) => {
-        this._postError({ message: p instanceof Error ? p.message : String(p), stack: p instanceof Error ? p.stack : void 0 });
+        p && typeof p == "object" && "message" in p ? this._postError(p) : this._postError({ message: p instanceof Error ? p.message : String(p), stack: p instanceof Error ? p.stack : void 0 });
       });
     } catch (d) {
-      this._postError({ message: d instanceof Error ? d.message : String(d), stack: d instanceof Error ? d.stack : void 0 });
+      this._postError({ message: d instanceof Error ? d.message : String(d), stack: d instanceof Error ? d.stack : void 0 }), console.error("[EmbeddedMode] Error during rendering:", d);
       return;
     }
     const n = this._rendering, t = this._fixtureId, i = () => {
@@ -4388,7 +4405,7 @@ ${i}`, this._container.appendChild(a), this._postError({ message: t instanceof E
     }
   }
 }
-function Ct(r) {
+function St(r) {
   const e = r.get("mode");
   return {
     mode: e === "headless" || e === "embedded" ? e : void 0,
@@ -4398,20 +4415,20 @@ function Ct(r) {
   };
 }
 globalThis._buildInfo = Jo;
-class Nt {
+class At {
   constructor(e, o) {
     l(this, "_runtime");
     const n = globalThis._buildInfo;
     n && console.log(`[component-explorer] v${n.version} (built ${n.date})`);
-    const t = new URLSearchParams(location.search), i = Ct(t), a = i.fixture;
+    const t = new URLSearchParams(location.search), i = St(t), a = i.fixture;
     if (i.mode === "embedded") {
       if (!a)
         throw new Error("Embedded mode requires a fixture query parameter");
       const s = i.file, d = o.loadFixtures(s ? { file: s } : void 0);
-      this._runtime = new _t(e, a, d);
+      this._runtime = new Ct(e, a, d);
     } else {
       const s = o.loadFixtures();
-      this._runtime = i.mode === "headless" ? new Bt(e, s) : new wt(e, s, o.daemonConfig);
+      this._runtime = i.mode === "headless" ? new _t(e, s) : new wt(e, s, o.daemonConfig);
     }
   }
   updateFixtures(e) {
@@ -4427,7 +4444,7 @@ export {
   Xr as ComponentIcon,
   ht as DaemonModel,
   pt as Explorer,
-  Nt as ExplorerApp,
+  At as ExplorerApp,
   Kr as ExplorerModel,
   M as FixturePath,
   Lr as FixtureRegistry,
@@ -4444,29 +4461,29 @@ export {
   pn as TreeItem,
   Oo as TreeView,
   rr as VIEWPORT_SIZES,
-  zt as asyncRender,
+  Pt as asyncRender,
   ir as collectComponents,
   ze as createComponentDefinition,
   ce as createFixtureTree,
-  Pt as defineFixture,
-  Wt as defineFixtureGroup,
+  Wt as defineFixture,
+  jt as defineFixtureGroup,
   $t as defineFixtureVariants,
   We as findNodeByPath,
   De as fixtureGroupBrand,
   Ne as fixtureVariantsBrand,
-  Dt as isComponentDefinition,
+  Nt as isComponentDefinition,
   Re as isFixtureGroup,
   Ee as isFixtureVariants,
   Ie as isSingleFixture,
   Ve as mergeStyles,
-  Mt as parseFixtureExport,
-  Vt as parseFixtureGroup,
-  Lt as parseFixtureVariants,
-  Ot as parseSingleFixture,
+  Ot as parseFixtureExport,
+  Lt as parseFixtureGroup,
+  Dt as parseFixtureVariants,
+  Vt as parseSingleFixture,
   nr as resolveViewport,
   Ae as singleFixtureBrand,
   h as styles,
-  jt as syncRender,
+  Ut as syncRender,
   Eo as toExplorerTree
 };
 //# sourceMappingURL=viewer.js.map