@vscode/component-explorer 0.1.1-0

package/dist/index.js

@@ -0,0 +1,1386 @@
+var Q = Object.defineProperty;
+var ee = (r, e, t) => e in r ? Q(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
+var l = (r, e, t) => ee(r, typeof e != "symbol" ? e + "" : e, t);
+import { observableValue as b, derived as R } from "@vscode/observables";
+import te from "react-dom";
+import { createElement as re } from "react";
+import { jsx as i, jsxs as p, Fragment as B } from "react/jsx-runtime";
+import { ViewModel as S, prop as a, viewWithModel as w, view as x } from "@vscode/observables-react";
+const oe = {
+  mobile: { width: 390, height: 844 },
+  tablet: { width: 768, height: 1024 },
+  desktop: { width: 1440, height: 900 }
+};
+function ie(r) {
+  return typeof r == "string" ? { name: r, ...oe[r] } : r;
+}
+function et(r) {
+  const e = {};
+  for (const t of r)
+    e[t.name] = t.defaultValue;
+  return e;
+}
+function tt(r) {
+  return typeof r == "object" && r !== null && "render" in r && typeof r.render == "function" && "id" in r && "name" in r;
+}
+const F = Symbol("singleFixture"), D = Symbol("fixtureGroup"), P = Symbol("fixtureVariants");
+function ne(r) {
+  return typeof r == "object" && r !== null && F in r;
+}
+function se(r) {
+  return typeof r == "object" && r !== null && D in r;
+}
+function de(r) {
+  return typeof r == "object" && r !== null && P in r;
+}
+function le(r, e, t) {
+  return {
+    id: e,
+    name: t,
+    description: r.description,
+    isolation: r.isolation ?? "shadow-dom",
+    displayMode: r.displayMode ?? { type: "component" },
+    styles: r.styles,
+    background: r.background ?? "light",
+    properties: r.properties ?? [],
+    render: r.render
+  };
+}
+function I(r) {
+  return {
+    [F]: !0,
+    _options: r,
+    _createDefinition: (e, t) => le(r, e, t)
+  };
+}
+function rt(r) {
+  return {
+    [D]: !0,
+    _entries: r
+  };
+}
+function ot(r) {
+  return {
+    [P]: !0,
+    _variants: r
+  };
+}
+function E(r) {
+  const e = {
+    id: "",
+    name: "Components",
+    type: "folder",
+    children: []
+  };
+  for (const [t, o] of r) {
+    const n = ce(t);
+    j(e, [n], o);
+  }
+  return e;
+}
+function ce(r) {
+  return (r.split("/").pop() ?? r).replace(/\.fixture\.(tsx?|jsx?)$/, "");
+}
+function j(r, e, t) {
+  var o;
+  if (ne(t)) {
+    const n = e.join("/"), s = e[e.length - 1], d = {
+      id: n,
+      name: s,
+      type: "component",
+      component: t._createDefinition(n, s)
+    };
+    r.children || (r.children = []), r.children.push(d);
+  } else if (se(t)) {
+    const n = e[e.length - 1], s = e.join("/");
+    let d = (o = r.children) == null ? void 0 : o.find(
+      (h) => h.type === "folder" && h.name === n
+    );
+    d || (d = {
+      id: s,
+      name: n,
+      type: "folder",
+      children: []
+    }, r.children || (r.children = []), r.children.push(d));
+    for (const [h, u] of Object.entries(t._entries))
+      j(d, [...e, h], u);
+  } else if (de(t)) {
+    const n = e[e.length - 1], d = {
+      id: e.join("/"),
+      name: n,
+      type: "variants",
+      children: []
+    };
+    r.children || (r.children = []), r.children.push(d);
+    for (const [h, u] of Object.entries(t._variants)) {
+      const g = [...e, h].join("/"), H = {
+        id: g,
+        name: h,
+        type: "component",
+        component: u._createDefinition(g, h)
+      };
+      d.children.push(H);
+    }
+  }
+}
+function V(r, e) {
+  if (e.length === 0)
+    return r;
+  let t = r;
+  for (const o of e) {
+    if (!t || !t.children)
+      return;
+    t = t.children.find((n) => n.name === o);
+  }
+  return t;
+}
+function ae(r) {
+  if (r.type === "component" && r.component)
+    return [r.component];
+  const e = [];
+  for (const t of r.children ?? [])
+    e.push(...ae(t));
+  return e;
+}
+class A {
+  constructor() {
+    l(this, "_fixtures", b(this, /* @__PURE__ */ new Map()));
+    /** Observable root of the fixture tree */
+    l(this, "root", R(this, (e) => {
+      const t = this._fixtures.read(e);
+      return E(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 o = new Map(this._fixtures.get());
+    o.set(e, t), this._fixtures.set(o, 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 o = this.root.read(e);
+    return V(o, 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(), o = E(t), n = V(o, e);
+    return n == null ? void 0 : n.component;
+  }
+}
+var y = {}, L;
+function he() {
+  if (L) return y;
+  L = 1;
+  var r = te;
+  if (process.env.NODE_ENV === "production")
+    y.createRoot = r.createRoot, y.hydrateRoot = r.hydrateRoot;
+  else {
+    var e = r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    y.createRoot = function(t, o) {
+      e.usingClientEntryPoint = !0;
+      try {
+        return r.createRoot(t, o);
+      } finally {
+        e.usingClientEntryPoint = !1;
+      }
+    }, y.hydrateRoot = function(t, o, n) {
+      e.usingClientEntryPoint = !0;
+      try {
+        return r.hydrateRoot(t, o, n);
+      } finally {
+        e.usingClientEntryPoint = !1;
+      }
+    };
+  }
+  return y;
+}
+var pe = he();
+function $(r) {
+  var e;
+  return {
+    id: r.id,
+    name: r.name,
+    type: r.type,
+    children: (e = r.children) == null ? void 0 : e.map($),
+    component: r.component
+  };
+}
+function k(r, e) {
+  const {
+    storageKey: t,
+    defaultValue: o,
+    serialize: n = JSON.stringify,
+    deserialize: s = JSON.parse
+  } = e;
+  let d = o;
+  try {
+    const f = localStorage.getItem(t);
+    f !== null && (d = s(f));
+  } catch {
+  }
+  const h = b(r, d), u = h.set.bind(h);
+  return h.set = (f, g) => {
+    try {
+      localStorage.setItem(t, n(f));
+    } catch {
+    }
+    u(f, g);
+  }, h;
+}
+class ue extends S({
+  registry: a.const()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "leftSidebarVisible", k(this, {
+      storageKey: "component-explorer:leftSidebarVisible",
+      defaultValue: !0
+    }));
+    l(this, "rightSidebarVisible", k(this, {
+      storageKey: "component-explorer:rightSidebarVisible",
+      defaultValue: !0
+    }));
+    l(this, "isDarkTheme", k(this, {
+      storageKey: "component-explorer:isDarkTheme",
+      defaultValue: !0
+    }));
+    l(this, "selectedNodeId", k(this, {
+      storageKey: "component-explorer:selectedNodeId",
+      defaultValue: void 0
+    }));
+    l(this, "expandedNodeIds", b(this, /* @__PURE__ */ new Set()));
+    /** The explorer's tree derived from the registry */
+    l(this, "tree", R(this, (t) => {
+      const o = this.props.registry.root.read(t);
+      return $(o);
+    }));
+    l(this, "selectedNode", R(this, (t) => {
+      const o = this.selectedNodeId.read(t);
+      if (!o) return;
+      const n = this.tree.read(t);
+      return this._findNode(n.children ?? [], o);
+    }));
+    /** List of preview rows to render based on current selection */
+    l(this, "selectedFixtures", R(this, (t) => {
+      const o = this.selectedNode.read(t);
+      return o ? this._collectPreviewRows(o, o.name) : [];
+    }));
+    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 o = this.expandedNodeIds.get(), n = new Set(o);
+      n.has(t) ? n.delete(t) : n.add(t), this.expandedNodeIds.set(n, void 0);
+    });
+  }
+  isNodeExpanded(t, o) {
+    return this.expandedNodeIds.read(o).has(t);
+  }
+  _findNode(t, o) {
+    for (const n of t) {
+      if (n.id === o) return n;
+      if (n.children) {
+        const s = this._findNode(n.children, o);
+        if (s) return s;
+      }
+    }
+  }
+  _collectPreviewRows(t, o) {
+    if (t.type === "component" && t.component)
+      return [{
+        type: "single",
+        fixture: {
+          id: t.id,
+          name: t.name,
+          path: o,
+          component: t.component
+        }
+      }];
+    if (t.type === "variants") {
+      const s = [];
+      for (const d of t.children ?? [])
+        d.type === "component" && d.component && s.push({
+          id: d.id,
+          name: d.name,
+          path: `${o} / ${d.name}`,
+          component: d.component
+        });
+      return s.length > 0 ? [{
+        type: "variants",
+        id: t.id,
+        name: t.name,
+        path: o,
+        fixtures: s
+      }] : [];
+    }
+    const n = [];
+    for (const s of t.children ?? []) {
+      const d = o ? `${o} / ${s.name}` : s.name;
+      n.push(...this._collectPreviewRows(s, d));
+    }
+    return n;
+  }
+}
+const c = {
+  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 T(...r) {
+  return Object.assign({}, ...r.filter(Boolean));
+}
+class fe extends S({
+  active: a()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "isHovered", b(this, !1));
+    l(this, "setHovered", (t) => {
+      this.isHovered.set(t, void 0);
+    });
+  }
+  get active() {
+    return this.props.active;
+  }
+}
+const z = w(
+  fe,
+  {
+    onClick: a.const(),
+    title: a.const(),
+    children: a.const()
+  },
+  (r, e, t) => {
+    const o = e.isHovered.read(r), n = e.active.read(r), s = T(
+      c.titleBarButton,
+      o && !n && c.titleBarButtonHover,
+      n && c.titleBarButtonActive
+    );
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        style: s,
+        onClick: t.onClick,
+        title: t.title,
+        onMouseEnter: () => e.setHovered(!0),
+        onMouseLeave: () => e.setHovered(!1),
+        children: t.children
+      }
+    );
+  }
+), ve = ({ style: r }) => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ i("path", { d: "M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5.3 5.4-5.3 5.3z" }) }), ge = ({ style: r }) => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ i("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)" }) }), me = ({ style: r }) => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ i("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" }) }), be = ({ style: r }) => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", style: r, children: /* @__PURE__ */ i("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" }) }), xe = () => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ i("path", { d: "M2 2v12h12V2H2zm11 11H6V3h7v10zM3 3h2v10H3V3z" }) }), ye = () => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ i("path", { d: "M2 2v12h12V2H2zm6 11V3h5v10H8zM3 3h4v10H3V3z" }) }), _e = () => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ i("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" }) }), Ce = () => /* @__PURE__ */ i("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "currentColor", children: /* @__PURE__ */ i("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" }) }), Se = x(
+  {
+    model: a.const()
+  },
+  (r, e) => {
+    const t = e.model, o = t.leftSidebarVisible.read(r), n = t.rightSidebarVisible.read(r), s = t.isDarkTheme.read(r), d = t.selectedNode.read(r);
+    return /* @__PURE__ */ p("div", { style: c.titleBar, children: [
+      /* @__PURE__ */ i("div", { style: c.titleBarSection, children: /* @__PURE__ */ i(
+        z,
+        {
+          active: o,
+          onClick: t.toggleLeftSidebar,
+          title: "Toggle left sidebar",
+          children: /* @__PURE__ */ i(xe, {})
+        }
+      ) }),
+      /* @__PURE__ */ i("div", { style: c.titleBarCenter, children: d ? /* @__PURE__ */ p(B, { children: [
+        /* @__PURE__ */ i("span", { style: { color: "var(--vscode-textLink-foreground)" }, children: "<" }),
+        /* @__PURE__ */ i("span", { children: d.name }),
+        /* @__PURE__ */ i("span", { style: { color: "var(--vscode-textLink-foreground)" }, children: "/>" })
+      ] }) : /* @__PURE__ */ i("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: "No component selected" }) }),
+      /* @__PURE__ */ p("div", { style: c.titleBarSection, children: [
+        /* @__PURE__ */ i(
+          z,
+          {
+            active: !1,
+            onClick: t.toggleTheme,
+            title: s ? "Switch to light theme" : "Switch to dark theme",
+            children: s ? /* @__PURE__ */ i(_e, {}) : /* @__PURE__ */ i(Ce, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          z,
+          {
+            active: n,
+            onClick: t.toggleRightSidebar,
+            title: "Toggle right sidebar",
+            children: /* @__PURE__ */ i(ye, {})
+          }
+        )
+      ] })
+    ] });
+  }
+), W = x(
+  {
+    model: a.const(),
+    nodes: a.const(),
+    depth: a.const()
+  },
+  (r, e) => /* @__PURE__ */ i(B, { children: e.nodes.map((t) => /* @__PURE__ */ i(Ie, { model: e.model, node: t, depth: e.depth }, t.id)) })
+);
+class we extends S({
+  model: a.const(),
+  node: a.const(),
+  depth: a.const()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "isHovered", b(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 Ie = w(we, {}, (r, e) => {
+  const t = e.explorerModel, o = e.treeNode, n = e.treeDepth, s = !!(o.children && o.children.length > 0), d = s ? t.isNodeExpanded(o.id, r) : !1, u = t.selectedNodeId.read(r) === o.id, f = e.isHovered.read(r), g = T(
+    c.treeItem,
+    { paddingLeft: `${8 + n * 12}px` },
+    u && c.treeItemSelected,
+    !u && f && c.treeItemHover
+  );
+  return /* @__PURE__ */ p(B, { children: [
+    /* @__PURE__ */ p(
+      "div",
+      {
+        style: g,
+        onClick: e.handleClick,
+        onDoubleClick: e.handleDoubleClick,
+        onMouseEnter: () => e.setHovered(!0),
+        onMouseLeave: () => e.setHovered(!1),
+        children: [
+          s ? /* @__PURE__ */ i("div", { style: c.treeItemChevron, onClick: e.handleChevronClick, children: d ? /* @__PURE__ */ i(ge, {}) : /* @__PURE__ */ i(ve, {}) }) : /* @__PURE__ */ i("div", { style: c.treeItemChevronPlaceholder }),
+          /* @__PURE__ */ i("div", { style: c.treeItemIcon, children: o.type === "folder" ? /* @__PURE__ */ i(be, { style: { color: "var(--vscode-symbolIcon-folderForeground)" } }) : /* @__PURE__ */ i(me, { style: { color: "#deb45b" } }) }),
+          /* @__PURE__ */ i("span", { style: c.treeItemLabel, children: o.name }),
+          s && /* @__PURE__ */ i("span", { style: c.treeItemCount, children: o.children.length })
+        ]
+      }
+    ),
+    s && d && /* @__PURE__ */ i(W, { model: t, nodes: o.children, depth: n + 1 })
+  ] });
+}), ke = x(
+  {
+    model: a.const()
+  },
+  (r, e) => {
+    const t = e.model.tree.read(r);
+    return /* @__PURE__ */ p("div", { style: c.sidebar, children: [
+      /* @__PURE__ */ i("div", { style: c.sidebarHeader, children: "Explorer" }),
+      /* @__PURE__ */ i("div", { style: c.sidebarContent, children: /* @__PURE__ */ i(W, { model: e.model, nodes: t.children ?? [], depth: 0 }) })
+    ] });
+  }
+);
+class Re extends S({}) {
+  constructor() {
+    super(...arguments);
+    l(this, "checked", b(this, !1));
+    l(this, "toggle", () => {
+      this.checked.set(!this.checked.get(), void 0);
+    });
+  }
+}
+const He = w(Re, {}, (r, e) => {
+  const t = e.checked.read(r), o = {
+    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)"
+  }, n = {
+    position: "absolute",
+    top: "2px",
+    left: t ? "18px" : "2px",
+    width: "12px",
+    height: "12px",
+    backgroundColor: "var(--vscode-foreground)",
+    borderRadius: "50%",
+    transition: "left 0.2s"
+  };
+  return /* @__PURE__ */ i("div", { style: o, onClick: e.toggle, children: /* @__PURE__ */ i("div", { style: n }) });
+}), ze = x(
+  {
+    node: a.const()
+  },
+  (r, e) => e.node.type !== "component" ? /* @__PURE__ */ i("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component (not a folder) to view its properties" }) : /* @__PURE__ */ p("div", { style: c.propertiesPanel, children: [
+    /* @__PURE__ */ p("div", { style: c.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: c.propertyLabel, children: [
+        "children",
+        /* @__PURE__ */ i("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : string" })
+      ] }),
+      /* @__PURE__ */ i(
+        "input",
+        {
+          type: "text",
+          style: c.propertyInput,
+          defaultValue: "Click me",
+          placeholder: "Enter text..."
+        }
+      ),
+      /* @__PURE__ */ i("div", { style: c.propertyDescription, children: "Button text content" })
+    ] }),
+    /* @__PURE__ */ p("div", { style: c.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: c.propertyLabel, children: [
+        "variant",
+        /* @__PURE__ */ i("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : select" })
+      ] }),
+      /* @__PURE__ */ p("select", { style: c.propertySelect, defaultValue: "default", children: [
+        /* @__PURE__ */ i("option", { value: "default", children: "default" }),
+        /* @__PURE__ */ i("option", { value: "primary", children: "primary" }),
+        /* @__PURE__ */ i("option", { value: "secondary", children: "secondary" }),
+        /* @__PURE__ */ i("option", { value: "destructive", children: "destructive" })
+      ] }),
+      /* @__PURE__ */ i("div", { style: c.propertyDescription, children: "Visual style variant" })
+    ] }),
+    /* @__PURE__ */ p("div", { style: c.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: c.propertyLabel, children: [
+        "size",
+        /* @__PURE__ */ i("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : select" })
+      ] }),
+      /* @__PURE__ */ p("select", { style: c.propertySelect, defaultValue: "default", children: [
+        /* @__PURE__ */ i("option", { value: "sm", children: "sm" }),
+        /* @__PURE__ */ i("option", { value: "default", children: "default" }),
+        /* @__PURE__ */ i("option", { value: "lg", children: "lg" })
+      ] }),
+      /* @__PURE__ */ i("div", { style: c.propertyDescription, children: "Button size" })
+    ] }),
+    /* @__PURE__ */ p("div", { style: c.propertyRow, children: [
+      /* @__PURE__ */ p("div", { style: c.propertyLabel, children: [
+        "disabled",
+        /* @__PURE__ */ i("span", { style: { color: "var(--vscode-descriptionForeground)" }, children: " : boolean" })
+      ] }),
+      /* @__PURE__ */ i(He, {}),
+      /* @__PURE__ */ i("div", { style: c.propertyDescription, children: "Disable the button" })
+    ] })
+  ] })
+), Be = x(
+  {
+    selectedNode: a.const()
+  },
+  (r, e) => /* @__PURE__ */ p("div", { style: T(c.sidebar, c.sidebarRight), children: [
+    /* @__PURE__ */ p("div", { style: c.sidebarHeader, children: [
+      /* @__PURE__ */ i("span", { style: { marginRight: "6px", color: "var(--vscode-textLink-foreground)" }, children: "</>" }),
+      "Props"
+    ] }),
+    /* @__PURE__ */ i("div", { style: c.sidebarContent, children: e.selectedNode ? /* @__PURE__ */ i(ze, { node: e.selectedNode }) : /* @__PURE__ */ i("div", { style: { padding: "12px", color: "var(--vscode-descriptionForeground)", fontSize: "12px" }, children: "Select a component to view its properties" }) })
+  ] })
+);
+class Te extends S({
+  fixture: a.const(),
+  onSizeChange: a.const(),
+  compact: a.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", b(this, void 0));
+    l(this, "measuredHeight", b(this, void 0));
+    l(this, "setContainerRef", (t) => {
+      if (t === this._containerRef || (this._cleanup(), this._containerRef = t, !t)) return;
+      const o = this.fixture.component;
+      o.isolation === "shadow-dom" ? this._renderInShadowDom(t, o) : this._renderDirect(t, o);
+      const n = this._renderContainer ?? t;
+      this._resizeObserver = new ResizeObserver((s) => {
+        for (const d of s) {
+          const { width: h, height: u } = d.contentRect;
+          if (u > 0) {
+            const f = Math.round(h), g = Math.round(u);
+            this.measuredWidth.set(f, void 0), this.measuredHeight.set(g, void 0), this.onSizeChange(this.fixture.id, f, g);
+          }
+        }
+      }), this._resizeObserver.observe(n);
+    });
+  }
+  get fixture() {
+    return this.props.fixture;
+  }
+  get onSizeChange() {
+    return this.props.onSizeChange;
+  }
+  get compact() {
+    return this.props.compact ?? !1;
+  }
+  _renderInShadowDom(t, o) {
+    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 (o.styles)
+      for (const d of o.styles)
+        if (d.type === "css") {
+          const h = document.createElement("style");
+          h.textContent = d.content, this._shadowRoot.appendChild(h);
+        } else if (d.type === "url") {
+          const h = document.createElement("link");
+          h.rel = "stylesheet", h.href = d.href, this._shadowRoot.appendChild(h);
+        } else d.type === "adopted" && (this._shadowRoot.adoptedStyleSheets = [
+          ...this._shadowRoot.adoptedStyleSheets,
+          d.sheet
+        ]);
+    const n = document.createElement("div");
+    n.style.display = "inline-block", this._renderContainer = n, this._shadowRoot.appendChild(n);
+    const s = this._getDefaultProps(o);
+    this._disposable = o.render(n, s);
+  }
+  _renderDirect(t, o) {
+    this._renderContainer = t;
+    const n = this._getDefaultProps(o);
+    this._disposable = o.render(t, n);
+  }
+  _getDefaultProps(t) {
+    const o = {};
+    for (const n of t.properties)
+      o[n.name] = n.defaultValue;
+    return o;
+  }
+  _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 K = w(
+  Te,
+  {},
+  (r, e) => {
+    const t = e.fixture, o = t.component, n = o.displayMode, s = e.measuredWidth.read(r), d = e.measuredHeight.read(r), h = e.compact;
+    let u;
+    if (n.type === "page") {
+      const Z = n.viewports[0], N = ie(Z);
+      u = {
+        width: N.width,
+        height: N.height,
+        overflow: "auto"
+      };
+    } else
+      u = {
+        display: "inline-block"
+      };
+    const f = s && d ? `${s} × ${d}` : "", g = h ? C.wrapperCompact : C.wrapper, H = h ? C.nameCompact : C.name;
+    return /* @__PURE__ */ p("div", { style: g, children: [
+      /* @__PURE__ */ p("div", { style: C.labelRow, children: [
+        /* @__PURE__ */ i("span", { style: H, children: t.name }),
+        !h && f && /* @__PURE__ */ i("span", { style: C.dimensions, children: f })
+      ] }),
+      /* @__PURE__ */ i("div", { style: Le(o.background), children: /* @__PURE__ */ i("div", { ref: e.setContainerRef, style: u }) })
+    ] });
+  }
+), _ = 8;
+function G(r, 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 Ne = {
+  backgroundColor: "#ffffff",
+  backgroundImage: G("#ffffff", "#e5e5e5")
+}, Ee = {
+  backgroundColor: "#1e1e1e",
+  backgroundImage: G("#1e1e1e", "#2d2d2d")
+}, Ve = {
+  display: "inline-block",
+  padding: "12px",
+  borderRadius: "4px",
+  backgroundSize: `${_ * 2}px ${_ * 2}px`,
+  backgroundPosition: `0 0, 0 ${_}px, ${_}px -${_}px, -${_}px 0`,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)"
+};
+function Le(r) {
+  const e = r === "dark" ? Ee : Ne;
+  return {
+    ...Ve,
+    backgroundColor: e.backgroundColor,
+    backgroundImage: e.backgroundImage
+  };
+}
+const C = {
+  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)"
+  }
+}, J = "component-explorer:fixtureSizes", O = 500;
+let m = null;
+function q() {
+  if (m !== null) return m;
+  try {
+    const r = localStorage.getItem(J);
+    if (r)
+      return m = JSON.parse(r), m;
+  } catch {
+  }
+  return m = {}, m;
+}
+function Oe() {
+  if (m !== null)
+    try {
+      const r = Object.entries(m);
+      r.length > O && (m = Object.fromEntries(r.slice(-O))), localStorage.setItem(J, JSON.stringify(m));
+    } catch {
+    }
+}
+function Me(r, e, t) {
+  const o = q();
+  o[r] = { width: e, height: t }, Oe();
+}
+function Fe() {
+  const r = q(), e = /* @__PURE__ */ new Map();
+  for (const [t, o] of Object.entries(r))
+    e.set(t, o.height);
+  return e;
+}
+const De = 280, Y = "component-explorer:scrollPositions", M = 100;
+function U() {
+  try {
+    const r = localStorage.getItem(Y);
+    if (r) return JSON.parse(r);
+  } catch {
+  }
+  return {};
+}
+function Pe(r, e) {
+  try {
+    const t = U();
+    t[r] = e;
+    const o = Object.entries(t), n = o.length > M ? Object.fromEntries(o.slice(-M)) : t;
+    localStorage.setItem(Y, JSON.stringify(n));
+  } catch {
+  }
+}
+function je(r) {
+  return U()[r] ?? 0;
+}
+class Ae extends S({
+  model: a.const()
+}) {
+  constructor() {
+    super(...arguments);
+    l(this, "_visibleIds", b(this, /* @__PURE__ */ new Set()));
+    // Pre-load cached heights from localStorage for accurate initial render
+    l(this, "_itemHeights", b(this, Fe()));
+    l(this, "_intersectionObserver", null);
+    l(this, "_scrollContainerRef", null);
+    l(this, "_pendingObservations", /* @__PURE__ */ new Map());
+    l(this, "_currentNodeId");
+    l(this, "_scrollSaveTimeout", null);
+    l(this, "setScrollContainerRef", (t) => {
+      this._scrollContainerRef && this._scrollContainerRef.removeEventListener("scroll", this._handleScroll), this._scrollContainerRef = t, this._setupIntersectionObserver(), t && (t.addEventListener("scroll", this._handleScroll, { passive: !0 }), this._restoreScrollPosition());
+    });
+    l(this, "_handleScroll", () => {
+      !this._scrollContainerRef || !this._currentNodeId || (this._scrollSaveTimeout && clearTimeout(this._scrollSaveTimeout), this._scrollSaveTimeout = setTimeout(() => {
+        this._scrollContainerRef && this._currentNodeId && Pe(this._currentNodeId, this._scrollContainerRef.scrollTop);
+      }, 150));
+    });
+    l(this, "observeElement", (t, o) => {
+      t && (this._intersectionObserver ? (t.setAttribute("data-fixture-id", o), this._intersectionObserver.observe(t)) : this._pendingObservations.set(t, o));
+    });
+    l(this, "handleSizeChange", (t, o, n) => {
+      const s = this._itemHeights.get();
+      if (s.get(t) !== n) {
+        const d = new Map(s);
+        d.set(t, n), this._itemHeights.set(d, void 0);
+      }
+      Me(t, o, n);
+    });
+    l(this, "getItemHeight", (t) => this._itemHeights.get().get(t) ?? De);
+  }
+  get explorerModel() {
+    return this.props.model;
+  }
+  get visibleIds() {
+    return this._visibleIds;
+  }
+  get itemHeights() {
+    return this._itemHeights;
+  }
+  /** Called when selection changes to restore/reset scroll position */
+  updateForSelection(t) {
+    this._currentNodeId !== t && (this._currentNodeId = t, this._restoreScrollPosition());
+  }
+  _restoreScrollPosition() {
+    if (!this._scrollContainerRef || !this._currentNodeId) return;
+    const t = je(this._currentNodeId);
+    requestAnimationFrame(() => {
+      this._scrollContainerRef && (this._scrollContainerRef.scrollTop = t);
+    });
+  }
+  _setupIntersectionObserver() {
+    var t;
+    if ((t = this._intersectionObserver) == null || t.disconnect(), !!this._scrollContainerRef) {
+      this._intersectionObserver = new IntersectionObserver(
+        (o) => {
+          const n = new Set(this._visibleIds.get());
+          for (const s of o) {
+            const d = s.target.getAttribute("data-fixture-id");
+            d && (s.isIntersecting ? n.add(d) : n.delete(d));
+          }
+          this._visibleIds.set(n, void 0);
+        },
+        {
+          root: this._scrollContainerRef,
+          rootMargin: "200px 0px",
+          // Pre-render items 200px before they come into view
+          threshold: 0
+        }
+      );
+      for (const [o, n] of this._pendingObservations)
+        o.setAttribute("data-fixture-id", n), this._intersectionObserver.observe(o);
+      this._pendingObservations.clear();
+    }
+  }
+  dispose() {
+    var t;
+    (t = this._intersectionObserver) == null || t.disconnect(), this._scrollContainerRef && this._scrollContainerRef.removeEventListener("scroll", this._handleScroll), this._scrollSaveTimeout && clearTimeout(this._scrollSaveTimeout);
+  }
+}
+const $e = w(
+  Ae,
+  {},
+  (r, e) => {
+    const t = e.explorerModel.selectedFixtures.read(r), o = e.visibleIds.read(r), n = e.explorerModel.selectedNodeId.read(r);
+    return e.updateForSelection(n), t.length === 0 ? /* @__PURE__ */ i("div", { style: v.emptyState, children: /* @__PURE__ */ i("span", { style: v.emptyText, children: "Select a component or folder to preview" }) }) : /* @__PURE__ */ i("div", { ref: e.setScrollContainerRef, style: v.scrollContainer, children: /* @__PURE__ */ i("div", { style: v.content, children: t.map((s) => s.type === "single" ? /* @__PURE__ */ i(
+      We,
+      {
+        fixture: s.fixture,
+        isVisible: o.has(s.fixture.id),
+        estimatedHeight: e.getItemHeight(s.fixture.id),
+        onSizeChange: e.handleSizeChange,
+        observeElement: (d) => e.observeElement(d, s.fixture.id)
+      },
+      s.fixture.id
+    ) : /* @__PURE__ */ i(
+      Ke,
+      {
+        row: s,
+        visibleIds: o,
+        getItemHeight: e.getItemHeight,
+        onSizeChange: e.handleSizeChange,
+        observeElement: e.observeElement
+      },
+      s.id
+    )) }) });
+  }
+), We = x(
+  {
+    fixture: a.const(),
+    isVisible: a(),
+    estimatedHeight: a(),
+    onSizeChange: a.const(),
+    observeElement: a.const()
+  },
+  (r, e) => {
+    const t = e.isVisible.read(r), o = e.estimatedHeight.read(r);
+    return /* @__PURE__ */ i("div", { ref: e.observeElement, style: { minHeight: t ? void 0 : o }, children: t ? /* @__PURE__ */ i(
+      K,
+      {
+        fixture: e.fixture,
+        onSizeChange: e.onSizeChange,
+        compact: !1
+      }
+    ) : /* @__PURE__ */ i("div", { style: { ...v.placeholder, height: o }, children: /* @__PURE__ */ i("span", { style: v.placeholderText, children: e.fixture.name }) }) });
+  }
+), Ke = x(
+  {
+    row: a.const(),
+    visibleIds: a(),
+    getItemHeight: a.const(),
+    onSizeChange: a.const(),
+    observeElement: a.const()
+  },
+  (r, e) => {
+    const t = e.visibleIds.read(r), o = e.row;
+    return /* @__PURE__ */ p("div", { style: v.variantsContainer, children: [
+      /* @__PURE__ */ i("div", { style: v.variantsHeader, children: /* @__PURE__ */ i("span", { style: v.variantsTitle, children: o.path }) }),
+      /* @__PURE__ */ i("div", { style: v.variantsContent, children: o.fixtures.map((n) => /* @__PURE__ */ i(
+        Ge,
+        {
+          fixture: n,
+          isVisible: t.has(n.id),
+          estimatedHeight: e.getItemHeight(n.id),
+          onSizeChange: e.onSizeChange,
+          observeElement: (s) => e.observeElement(s, n.id)
+        },
+        n.id
+      )) })
+    ] });
+  }
+), Ge = x(
+  {
+    fixture: a.const(),
+    isVisible: a(),
+    estimatedHeight: a(),
+    onSizeChange: a.const(),
+    observeElement: a.const()
+  },
+  (r, e) => {
+    const t = e.isVisible.read(r), o = e.estimatedHeight.read(r);
+    return /* @__PURE__ */ i("div", { ref: e.observeElement, style: v.variantItem, children: t ? /* @__PURE__ */ i(
+      K,
+      {
+        fixture: e.fixture,
+        onSizeChange: e.onSizeChange,
+        compact: !0
+      }
+    ) : /* @__PURE__ */ i("div", { style: { ...v.variantPlaceholder, height: o }, children: /* @__PURE__ */ i("span", { style: v.placeholderText, children: e.fixture.name }) }) });
+  }
+), v = {
+  scrollContainer: {
+    flex: 1,
+    overflow: "auto",
+    backgroundColor: "var(--vscode-editor-background)"
+  },
+  content: {
+    padding: "32px"
+  },
+  emptyState: {
+    flex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-editor-background)"
+  },
+  emptyText: {
+    color: "var(--vscode-descriptionForeground)",
+    fontSize: "14px"
+  },
+  placeholder: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+    borderRadius: "4px",
+    marginBottom: "32px",
+    opacity: 0.5
+  },
+  placeholderText: {
+    color: "var(--vscode-descriptionForeground)",
+    fontSize: "11px"
+  },
+  variantsContainer: {
+    marginBottom: "32px"
+  },
+  variantsHeader: {
+    marginBottom: "12px"
+  },
+  variantsTitle: {
+    fontSize: "13px",
+    fontWeight: 500,
+    color: "var(--vscode-foreground)"
+  },
+  variantsContent: {
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: "16px"
+  },
+  variantItem: {
+    flex: "0 0 auto"
+  },
+  variantPlaceholder: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "var(--vscode-editor-inactiveSelectionBackground)",
+    borderRadius: "4px",
+    opacity: 0.5,
+    minWidth: "150px"
+  }
+}, X = w(
+  ue,
+  {},
+  (r, e) => {
+    const t = e.leftSidebarVisible.read(r), o = e.rightSidebarVisible.read(r), n = e.isDarkTheme.read(r), s = e.selectedNode.read(r);
+    return /* @__PURE__ */ p("div", { className: n ? "vscode-theme default-dark-plus" : "vscode-theme default-light-plus", style: c.container, children: [
+      t && /* @__PURE__ */ i(ke, { model: e }),
+      /* @__PURE__ */ p("div", { style: c.centerArea, children: [
+        /* @__PURE__ */ i(Se, { model: e }),
+        /* @__PURE__ */ i($e, { model: e })
+      ] }),
+      o && /* @__PURE__ */ i(Be, { selectedNode: s })
+    ] });
+  }
+);
+function Je() {
+  const r = new A();
+  return r.register("components/Button.fixture.tsx", I({
+    Primary: {
+      render: (e) => (e.innerHTML = "<button>Primary Button</button>", { dispose: () => {
+        e.innerHTML = "";
+      } })
+    },
+    Icon: {
+      render: (e) => (e.innerHTML = "<button>🔔 Icon Button</button>", { dispose: () => {
+        e.innerHTML = "";
+      } })
+    }
+  })), r.register("components/Input.fixture.tsx", I({
+    Text: {
+      render: (e) => (e.innerHTML = '<input type="text" placeholder="Text Input" />', { dispose: () => {
+        e.innerHTML = "";
+      } })
+    },
+    Search: {
+      render: (e) => (e.innerHTML = '<input type="search" placeholder="Search..." />', { dispose: () => {
+        e.innerHTML = "";
+      } })
+    }
+  })), r.register("components/Card.fixture.tsx", I({
+    Basic: {
+      render: (e) => (e.innerHTML = '<div style="border: 1px solid #ccc; padding: 16px;">Basic Card</div>', { dispose: () => {
+        e.innerHTML = "";
+      } })
+    }
+  })), r.register("components/Feedback.fixture.tsx", I({
+    Badge: {
+      render: (e) => (e.innerHTML = '<span style="background: blue; color: white; padding: 2px 8px; border-radius: 4px;">Badge</span>', { dispose: () => {
+        e.innerHTML = "";
+      } })
+    },
+    Alert: {
+      render: (e) => (e.innerHTML = '<div style="background: #ffffcc; padding: 8px; border: 1px solid #cc0;">Alert message</div>', { dispose: () => {
+        e.innerHTML = "";
+      } })
+    }
+  })), r;
+}
+function it() {
+  const r = Je();
+  return /* @__PURE__ */ i(X, { registry: r });
+}
+class nt {
+  constructor(e, t) {
+    l(this, "_root");
+    l(this, "_registry", new A());
+    this._populateRegistry(t), this._root = pe.createRoot(e), this._root.render(re(X, { registry: this._registry }));
+  }
+  _populateRegistry(e) {
+    this._registry.clear();
+    for (const [t, o] of Object.entries(e)) {
+      const n = o.default;
+      n && typeof n == "object" && this._registry.register(t, n);
+    }
+  }
+  /**
+   * Updates the fixtures. The UI will update automatically since the registry is observable.
+   */
+  updateFixtures(e) {
+    this._populateRegistry(e);
+  }
+  /**
+   * Unmounts the explorer and cleans up resources.
+   */
+  dispose() {
+    this._root.unmount();
+  }
+}
+export {
+  ge as ChevronDownIcon,
+  ve as ChevronRightIcon,
+  me as ComponentIcon,
+  X as Explorer,
+  nt as ExplorerApp,
+  ue as ExplorerModel,
+  it as ExplorerWithDefaults,
+  A as FixtureRegistry,
+  be as FolderIcon,
+  ke as LeftSidebar,
+  Ce as MoonIcon,
+  xe as PanelLeftIcon,
+  ye as PanelRightIcon,
+  Be as RightSidebar,
+  _e as SunIcon,
+  Se as TitleBar,
+  z as TitleBarButton,
+  Ie as TreeItem,
+  W as TreeView,
+  oe as VIEWPORT_SIZES,
+  ae as collectComponents,
+  E as createFixtureTree,
+  I as defineFixture,
+  rt as defineFixtureGroup,
+  ot as defineFixtureVariants,
+  V as findNodeByPath,
+  et as getDefaultPropertyValues,
+  tt as isComponentDefinition,
+  se as isFixtureGroup,
+  de as isFixtureVariants,
+  ne as isSingleFixture,
+  T as mergeStyles,
+  ie as resolveViewport,
+  c as styles,
+  $ as toExplorerTree
+};
+//# sourceMappingURL=index.js.map