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

package/dist/index.js

@@ -1,1386 +1,28 @@
-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) {
+const e = Symbol.for("@vscode/component-explorer/singleFixture/v1"), n = Symbol.for("@vscode/component-explorer/fixtureGroup/v1"), t = Symbol.for("@vscode/component-explorer/fixtureVariants/v1");
+function o(r) {
   return {
-    [F]: !0,
-    _options: r,
-    _createDefinition: (e, t) => le(r, e, t)
+    [e]: !0,
+    _options: r
   };
 }
-function rt(r) {
+function i(r) {
   return {
-    [D]: !0,
+    [n]: !0,
     _entries: r
   };
 }
-function ot(r) {
+function u(r) {
   return {
-    [P]: !0,
+    [t]: !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
+  o as defineFixture,
+  i as defineFixtureGroup,
+  u as defineFixtureVariants,
+  n as fixtureGroupBrand,
+  t as fixtureVariantsBrand,
+  e as singleFixtureBrand
 };
 //# sourceMappingURL=index.js.map