@dxos/plugin-explorer 0.6.11 → 0.6.12-main.5cc132e

package/dist/lib/node-esm/ExplorerArticle-2LF7QANN.mjs

@@ -0,0 +1,27 @@
+import {
+  Graph
+} from "./chunk-XKITKIPQ.mjs";
+
+// packages/plugins/experimental/plugin-explorer/src/components/ExplorerArticle.tsx
+import React from "react";
+import { useGlobalSearch } from "@dxos/plugin-search";
+import { getSpace } from "@dxos/react-client/echo";
+var ExplorerArticle = ({ view }) => {
+  const space = getSpace(view);
+  const { match } = useGlobalSearch();
+  if (!space) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    className: "row-span-2 overflow-auto"
+  }, /* @__PURE__ */ React.createElement(Graph, {
+    space,
+    match
+  }));
+};
+var ExplorerArticle_default = ExplorerArticle;
+export {
+  ExplorerArticle_default as default
+};
+//# sourceMappingURL=ExplorerArticle-2LF7QANN.mjs.map

package/dist/lib/node-esm/ExplorerArticle-2LF7QANN.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ExplorerArticle.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\n\nimport { Graph } from './Graph';\nimport { type ViewType } from '../types';\n\nconst ExplorerArticle = ({ view }: { view: ViewType }) => {\n  const space = getSpace(view);\n  const { match } = useGlobalSearch();\n\n  if (!space) {\n    return null;\n  }\n\n  return (\n    <div role='none' className='row-span-2 overflow-auto'>\n      <Graph space={space} match={match} />\n    </div>\n  );\n};\n\nexport default ExplorerArticle;\n"],
+  "mappings": ";;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AAKzB,IAAMC,kBAAkB,CAAC,EAAEC,KAAI,MAAsB;AACnD,QAAMC,QAAQC,SAASF,IAAAA;AACvB,QAAM,EAAEG,MAAK,IAAKC,gBAAAA;AAElB,MAAI,CAACH,OAAO;AACV,WAAO;EACT;AAEA,SACE,sBAAA,cAACI,OAAAA;IAAIC,MAAK;IAAOC,WAAU;KACzB,sBAAA,cAACC,OAAAA;IAAMP;IAAcE;;AAG3B;AAEA,IAAA,0BAAeJ;",
+  "names": ["React", "useGlobalSearch", "getSpace", "ExplorerArticle", "view", "space", "getSpace", "match", "useGlobalSearch", "div", "role", "className", "Graph"]
+}

package/dist/lib/node-esm/ExplorerMain-K6Z6UVZR.mjs

@@ -0,0 +1,33 @@
+import {
+  Graph
+} from "./chunk-XKITKIPQ.mjs";
+
+// packages/plugins/experimental/plugin-explorer/src/components/ExplorerMain.tsx
+import React from "react";
+import { useGlobalSearch } from "@dxos/plugin-search";
+import { getSpace } from "@dxos/react-client/echo";
+import { Main } from "@dxos/react-ui";
+import { baseSurface, topbarBlockPaddingStart, fixedInsetFlexLayout, bottombarBlockPaddingEnd } from "@dxos/react-ui-theme";
+var ExplorerMain = ({ view }) => {
+  const space = getSpace(view);
+  const { match } = useGlobalSearch();
+  if (!space) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Main.Content, {
+    classNames: [
+      baseSurface,
+      fixedInsetFlexLayout,
+      topbarBlockPaddingStart,
+      bottombarBlockPaddingEnd
+    ]
+  }, /* @__PURE__ */ React.createElement(Graph, {
+    space,
+    match
+  }));
+};
+var ExplorerMain_default = ExplorerMain;
+export {
+  ExplorerMain_default as default
+};
+//# sourceMappingURL=ExplorerMain-K6Z6UVZR.mjs.map

package/dist/lib/node-esm/ExplorerMain-K6Z6UVZR.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ExplorerMain.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React from 'react';\n\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Main } from '@dxos/react-ui';\nimport {\n  baseSurface,\n  topbarBlockPaddingStart,\n  fixedInsetFlexLayout,\n  bottombarBlockPaddingEnd,\n} from '@dxos/react-ui-theme';\n\nimport { Graph } from './Graph';\nimport { type ViewType } from '../types';\n\nconst ExplorerMain = ({ view }: { view: ViewType }) => {\n  const space = getSpace(view);\n  const { match } = useGlobalSearch();\n  if (!space) {\n    return null;\n  }\n\n  return (\n    <Main.Content classNames={[baseSurface, fixedInsetFlexLayout, topbarBlockPaddingStart, bottombarBlockPaddingEnd]}>\n      <Graph space={space} match={match} />\n    </Main.Content>\n  );\n};\n\nexport default ExplorerMain;\n"],
+  "mappings": ";;;;;AAIA,OAAOA,WAAW;AAElB,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,YAAY;AACrB,SACEC,aACAC,yBACAC,sBACAC,gCACK;AAKP,IAAMC,eAAe,CAAC,EAAEC,KAAI,MAAsB;AAChD,QAAMC,QAAQC,SAASF,IAAAA;AACvB,QAAM,EAAEG,MAAK,IAAKC,gBAAAA;AAClB,MAAI,CAACH,OAAO;AACV,WAAO;EACT;AAEA,SACE,sBAAA,cAACI,KAAKC,SAAO;IAACC,YAAY;MAACC;MAAaC;MAAsBC;MAAyBC;;KACrF,sBAAA,cAACC,OAAAA;IAAMX;IAAcE;;AAG3B;AAEA,IAAA,uBAAeJ;",
+  "names": ["React", "useGlobalSearch", "getSpace", "Main", "baseSurface", "topbarBlockPaddingStart", "fixedInsetFlexLayout", "bottombarBlockPaddingEnd", "ExplorerMain", "view", "space", "getSpace", "match", "useGlobalSearch", "Main", "Content", "classNames", "baseSurface", "fixedInsetFlexLayout", "topbarBlockPaddingStart", "bottombarBlockPaddingEnd", "Graph"]
+}

package/dist/lib/node-esm/chunk-JIDPF2GF.mjs

@@ -0,0 +1,27 @@
+import {
+  EXPLORER_PLUGIN
+} from "./chunk-TL6ADY3P.mjs";
+
+// packages/plugins/experimental/plugin-explorer/src/types/view.ts
+import { S, TypedObject } from "@dxos/echo-schema";
+var ViewType = class extends TypedObject({
+  typename: "dxos.org/type/View",
+  version: "0.1.0"
+})({
+  name: S.optional(S.String),
+  type: S.String
+}) {
+};
+
+// packages/plugins/experimental/plugin-explorer/src/types/types.ts
+var EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;
+var ExplorerAction;
+(function(ExplorerAction2) {
+  ExplorerAction2[ExplorerAction2["CREATE"] = `${EXPLORER_ACTION}/create`] = "CREATE";
+})(ExplorerAction || (ExplorerAction = {}));
+
+export {
+  ViewType,
+  ExplorerAction
+};
+//# sourceMappingURL=chunk-JIDPF2GF.mjs.map

package/dist/lib/node-esm/chunk-JIDPF2GF.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/view.ts", "../../../src/types/types.ts"],
+  "sourcesContent": ["//\n// Copyright 2024 DXOS.org\n//\n\nimport { S, TypedObject } from '@dxos/echo-schema';\n\n// TODO(burdon): Standardize views?\nexport class ViewType extends TypedObject({ typename: 'dxos.org/type/View', version: '0.1.0' })({\n  name: S.optional(S.String),\n  type: S.String,\n}) {}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport type {\n  GraphBuilderProvides,\n  IntentResolverProvides,\n  MetadataRecordsProvides,\n  SurfaceProvides,\n  TranslationsProvides,\n} from '@dxos/app-framework';\nimport { type SchemaProvides } from '@dxos/plugin-client';\n\nimport { EXPLORER_PLUGIN } from '../meta';\n\nconst EXPLORER_ACTION = `${EXPLORER_PLUGIN}/action`;\n\nexport enum ExplorerAction {\n  CREATE = `${EXPLORER_ACTION}/create`,\n}\n\nexport type ExplorerPluginProvides = SurfaceProvides &\n  IntentResolverProvides &\n  GraphBuilderProvides &\n  MetadataRecordsProvides &\n  TranslationsProvides &\n  SchemaProvides;\n"],
+  "mappings": ";;;;;AAIA,SAASA,GAAGC,mBAAmB;AAGxB,IAAMC,WAAN,cAAuBC,YAAY;EAAEC,UAAU;EAAsBC,SAAS;AAAQ,CAAA,EAAG;EAC9FC,MAAMC,EAAEC,SAASD,EAAEE,MAAM;EACzBC,MAAMH,EAAEE;AACV,CAAA,EAAA;AAAI;;;ACKJ,IAAME,kBAAkB,GAAGC,eAAAA;;UAEfC,iBAAAA;8CACD,GAAGF,eAAAA,SAAwB,IAAA;GAD1BE,mBAAAA,iBAAAA,CAAAA,EAAAA;",
+  "names": ["S", "TypedObject", "ViewType", "TypedObject", "typename", "version", "name", "S", "optional", "String", "type", "EXPLORER_ACTION", "EXPLORER_PLUGIN", "ExplorerAction"]
+}

package/dist/lib/node-esm/chunk-TL6ADY3P.mjs

@@ -0,0 +1,21 @@
+// packages/plugins/experimental/plugin-explorer/src/meta.tsx
+import { Graph } from "@phosphor-icons/react";
+import React from "react";
+import { pluginMeta } from "@dxos/app-framework";
+var EXPLORER_PLUGIN = "dxos.org/plugin/explorer";
+var meta_default = pluginMeta({
+  id: EXPLORER_PLUGIN,
+  name: "Explorer",
+  description: "Explore the ECHO hypergraph.",
+  tags: [
+    "experimental"
+  ],
+  iconComponent: (props) => /* @__PURE__ */ React.createElement(Graph, props),
+  iconSymbol: "ph--graph--regular"
+});
+
+export {
+  EXPLORER_PLUGIN,
+  meta_default
+};
+//# sourceMappingURL=chunk-TL6ADY3P.mjs.map

package/dist/lib/node-esm/chunk-TL6ADY3P.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Graph, type IconProps } from '@phosphor-icons/react';\nimport React from 'react';\n\nimport { pluginMeta } from '@dxos/app-framework';\n\nexport const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';\n\nexport default pluginMeta({\n  id: EXPLORER_PLUGIN,\n  name: 'Explorer',\n  description: 'Explore the ECHO hypergraph.',\n  tags: ['experimental'],\n  iconComponent: (props: IconProps) => <Graph {...props} />,\n  iconSymbol: 'ph--graph--regular',\n});\n"],
+  "mappings": ";AAIA,SAASA,aAA6B;AACtC,OAAOC,WAAW;AAElB,SAASC,kBAAkB;AAEpB,IAAMC,kBAAkB;AAE/B,IAAA,eAAeC,WAAW;EACxBC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,MAAM;IAAC;;EACPC,eAAe,CAACC,UAAqB,sBAAA,cAACC,OAAUD,KAAAA;EAChDE,YAAY;AACd,CAAA;",
+  "names": ["Graph", "React", "pluginMeta", "EXPLORER_PLUGIN", "pluginMeta", "id", "name", "description", "tags", "iconComponent", "props", "Graph", "iconSymbol"]
+}

package/dist/lib/node-esm/chunk-XKITKIPQ.mjs

@@ -0,0 +1,474 @@
+// packages/plugins/experimental/plugin-explorer/src/components/Graph/graph-model.ts
+import { AST, DynamicSchema, getSchema, getType, ReferenceAnnotationId, SchemaValidator, StoredSchema } from "@dxos/echo-schema";
+import { GraphModel } from "@dxos/gem-spore";
+import { log } from "@dxos/log";
+import { CollectionType } from "@dxos/plugin-space/types";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/experimental/plugin-explorer/src/components/Graph/graph-model.ts";
+var SpaceGraphModel = class extends GraphModel {
+  constructor(_options = {}) {
+    super();
+    this._options = _options;
+    this._graph = {
+      nodes: [],
+      links: []
+    };
+  }
+  get graph() {
+    return this._graph;
+  }
+  get objects() {
+    return this._objects ?? [];
+  }
+  open(space, objectId) {
+    if (!this._subscription) {
+      const query = space.db.query((object) => !(object instanceof CollectionType));
+      this._subscription = query.subscribe(({ objects }) => {
+        this._objects = objects;
+        this._graph.nodes = objects.map((object) => {
+          if (object instanceof StoredSchema) {
+            const effectSchema = space.db.schema.getSchemaById(object.id);
+            return {
+              type: "schema",
+              id: object.id,
+              schema: effectSchema.schema
+            };
+          }
+          return {
+            type: "echo-object",
+            id: object.id,
+            object
+          };
+        });
+        this._graph.links = objects.reduce((links, object) => {
+          const objectSchema = getSchema(object);
+          const typename = getType(object)?.objectId;
+          if (objectSchema == null || typename == null) {
+            log.info("no schema for object:", {
+              id: object.id.slice(0, 8)
+            }, {
+              F: __dxlog_file,
+              L: 81,
+              S: this,
+              C: (f, a) => f(...a)
+            });
+            return links;
+          }
+          if (!(objectSchema instanceof DynamicSchema)) {
+            const idx = objects.findIndex((obj) => obj.id === typename);
+            if (idx === -1) {
+              this._graph.nodes.push({
+                id: typename,
+                type: "schema",
+                schema: objectSchema
+              });
+            }
+          }
+          if (this._options.schema) {
+            links.push({
+              id: `${object.id}-${typename}`,
+              source: object.id,
+              target: typename
+            });
+          }
+          AST.getPropertySignatures(objectSchema.ast).forEach((prop) => {
+            if (!SchemaValidator.hasTypeAnnotation(objectSchema, prop.name.toString(), ReferenceAnnotationId)) {
+              return;
+            }
+            const value = object[String(prop.name)];
+            if (value) {
+              const refs = Array.isArray(value) ? value : [
+                value
+              ];
+              for (const ref of refs) {
+                if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
+                  links.push({
+                    id: `${object.id}-${String(prop.name)}-${ref.id}`,
+                    source: object.id,
+                    target: ref.id
+                  });
+                }
+              }
+            }
+          });
+          return links;
+        }, []);
+        this.triggerUpdate();
+      }, {
+        fire: true
+      });
+    }
+    this.setSelected(objectId);
+    return this;
+  }
+  close() {
+    if (this._subscription) {
+      this._subscription();
+      this._subscription = void 0;
+    }
+    return this;
+  }
+};
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/Tree.tsx
+import React2, { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
+import { useResizeDetector } from "react-resize-detector";
+import { createSvgContext as createSvgContext2, SVG as SVG2, SVGRoot as SVGRoot2 } from "@dxos/gem-core";
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/HierarchicalEdgeBundling.ts
+import * as d3 from "d3";
+var HierarchicalEdgeBundling = (s, data, options) => {
+  const svg = d3.select(s);
+  svg.selectAll("*").remove();
+  const { radius = 600, padding = 100, slots: slots2 } = options;
+  const root = d3.hierarchy(flatten(data));
+  const tree3 = d3.cluster().size([
+    2 * Math.PI,
+    radius - padding
+  ]);
+  const layout = tree3(addLinks(root));
+  const node = svg.append("g").selectAll().data(layout.leaves()).join("g").attr("transform", (d) => `rotate(${d.x * (180 / Math.PI) - 90}) translate(${d.y},0)`).append("text").attr("class", slots2?.text ?? "").attr("dy", "0.31em").attr("x", (d) => d.x < Math.PI ? 6 : -6).attr("text-anchor", (d) => d.x < Math.PI ? "start" : "end").attr("transform", (d) => d.x >= Math.PI ? "rotate(180)" : null).call((text) => text.text((d) => d.data.id.slice(0, 8)));
+  const line = d3.lineRadial().curve(d3.curveBundle.beta(0.85)).radius((d) => d.y).angle((d) => d.x);
+  const links = svg.append("g").selectAll().data(layout.leaves().flatMap((leaf) => leaf.outgoing)).join("path").style("mix-blend-mode", "multiply").attr("class", slots2?.path ?? "").attr("d", ([i, o]) => {
+    return line(i.path(o));
+  }).each(function(d) {
+    d.path = this;
+  });
+};
+var addLinks = (root) => {
+  const nodes = new Map(root.descendants().map((d) => [
+    d.data.id,
+    d
+  ]));
+  const parents = root.descendants().reduce((map, d) => {
+    if (d.children?.length) {
+      map.set(d.data.id, d);
+    }
+    return map;
+  }, /* @__PURE__ */ new Map());
+  for (const d of root.leaves()) {
+    const parent = parents.get(d.data.id);
+    if (parent) {
+      d.outgoing = parent.data.children?.slice(1).map((child) => {
+        return [
+          d,
+          nodes.get(child.id)
+        ];
+      }) ?? [];
+    } else {
+      d.outgoing = [];
+    }
+  }
+  return root;
+};
+var flatten = (node) => {
+  const clone = {
+    id: node.id
+  };
+  if (node.children?.length) {
+    const children = node.children.map((child) => flatten(child));
+    clone.children = [
+      {
+        id: node.id
+      },
+      ...children
+    ];
+  }
+  return clone;
+};
+var HierarchicalEdgeBundling_default = HierarchicalEdgeBundling;
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/RadialTree.ts
+import * as d32 from "d3";
+var RadialTree = (s, data, options) => {
+  const svg = d32.select(s);
+  svg.selectAll("*").remove();
+  const { label, radius = 400, r = 4, slots: slots2 } = options;
+  const arc = 2 * Math.PI;
+  const root = d32.hierarchy(data);
+  const descendants = root.descendants();
+  const getLabel = label === null ? null : descendants.map((d) => label(d.data));
+  const layout = d32.tree().size([
+    arc,
+    radius
+  ]).separation((a, b) => (a.parent === b.parent ? 1 : 2) / a.depth);
+  layout(root);
+  svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots2?.path ?? "").attr("d", d32.linkRadial().angle((d) => d.x + Math.PI / 2).radius((d) => d.y));
+  const node = svg.append("g").selectAll("a").data(root.descendants()).join("a").attr("transform", (d) => `rotate(${d.x * 180 / Math.PI}) translate(${d.y},0)`);
+  node.append("circle").attr("class", slots2?.node ?? "").attr("r", r);
+  if (getLabel) {
+    node.append("text").attr("transform", (d) => `rotate(${d.x >= Math.PI ? 180 : 0})`).attr("dy", "0.32em").attr("x", (d) => d.x < Math.PI === !d.children ? 6 : -6).attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end").attr("class", slots2?.text ?? "").text((d, i) => getLabel[i]);
+  }
+  return svg.node();
+};
+var RadialTree_default = RadialTree;
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/layout/TidyTree.ts
+import * as d33 from "d3";
+var TidyTree = (s, data, options) => {
+  const svg = d33.select(s);
+  svg.selectAll("*").remove();
+  const { label, width, height, r = 4, padding = 4, margin = 60, slots: slots2 } = options;
+  const root = d33.hierarchy(data);
+  const descendants = root.descendants();
+  const getLabel = label == null ? null : descendants.map((d) => label(d.data));
+  const dx = 16;
+  const dy = width / (root.height + padding);
+  const layout = d33.tree().nodeSize([
+    dx,
+    dy
+  ]);
+  layout(root);
+  let x0 = Infinity;
+  let x1 = -x0;
+  let y0 = Infinity;
+  let y1 = -y0;
+  root.each((d) => {
+    if (d.x > x1) {
+      x1 = d.x;
+    }
+    if (d.x < x0) {
+      x0 = d.x;
+    }
+    if (d.y > y1) {
+      y1 = d.y;
+    }
+    if (d.y < y0) {
+      y0 = d.y;
+    }
+  });
+  const sx = Math.min(2, Math.max(1, (height - margin * 2) / (x1 - x0)));
+  const oy = -(width - (y1 - y0)) / 2;
+  svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots2?.path ?? "").attr("d", d33.link(d33.curveBumpX).x((d) => d.y + oy).y((d) => d.x * sx));
+  const node = svg.append("g").selectAll("a").data(root.descendants()).join("a").attr("transform", (d) => `translate(${d.y + oy},${d.x * sx})`);
+  node.append("circle").attr("class", slots2?.node ?? "").attr("r", r);
+  if (getLabel) {
+    node.append("text").attr("dy", "0.32em").attr("x", (d) => d.children ? -6 : 6).attr("text-anchor", (d) => d.children ? "end" : "start").attr("class", slots2?.text ?? "").text((d, i) => getLabel[i]);
+  }
+};
+var TidyTree_default = TidyTree;
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/types.ts
+var mapGraphToTreeData = (model, maxDepth = 8) => {
+  const mapNode = (node, depth = 0) => {
+    const treeNode = {
+      id: model.idAccessor(node),
+      label: model.idAccessor(node).slice(0, 8)
+    };
+    const links = model.graph.links.filter((link2) => link2.source === treeNode.id);
+    if (depth < maxDepth) {
+      treeNode.children = links.map((link2) => mapNode(model.graph.nodes.find((node2) => model.idAccessor(node2) === link2.target), depth + 1));
+    }
+    return treeNode;
+  };
+  let data;
+  if (model.selected) {
+    const node = model.graph.nodes.find((node2) => model.idAccessor(node2) === model.selected);
+    if (node) {
+      data = mapNode(node);
+    }
+  }
+  return data;
+};
+
+// packages/plugins/experimental/plugin-explorer/src/components/Graph/Graph.tsx
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { getType as getType2 } from "@dxos/echo-schema";
+import { createSvgContext, defaultGridStyles, Grid, SVG, SVGRoot, Zoom } from "@dxos/gem-core";
+import { defaultStyles, Graph as GraphComponent, GraphForceProjector, Markers } from "@dxos/gem-spore";
+import { filterObjectsSync } from "@dxos/plugin-search";
+import { useThemeContext } from "@dxos/react-ui";
+import { mx } from "@dxos/react-ui-theme";
+import "@dxos/gem-spore/styles";
+var slots = {};
+var colors = [
+  "[&>circle]:!fill-black-300   [&>circle]:!stroke-black-600",
+  "[&>circle]:!fill-slate-300   [&>circle]:!stroke-slate-600",
+  "[&>circle]:!fill-green-300   [&>circle]:!stroke-green-600",
+  "[&>circle]:!fill-sky-300     [&>circle]:!stroke-sky-600",
+  "[&>circle]:!fill-cyan-300    [&>circle]:!stroke-cyan-600",
+  "[&>circle]:!fill-rose-300    [&>circle]:!stroke-rose-600",
+  "[&>circle]:!fill-purple-300  [&>circle]:!stroke-purple-600",
+  "[&>circle]:!fill-orange-300  [&>circle]:!stroke-orange-600",
+  "[&>circle]:!fill-teal-300    [&>circle]:!stroke-teal-600",
+  "[&>circle]:!fill-indigo-300  [&>circle]:!stroke-indigo-600"
+];
+var Graph = ({ space, match }) => {
+  const model = useMemo(() => space ? new SpaceGraphModel({
+    schema: true
+  }).open(space) : void 0, [
+    space
+  ]);
+  const [selected, setSelected] = useState();
+  const { themeMode } = useThemeContext();
+  const context = createSvgContext();
+  const projector = useMemo(() => new GraphForceProjector(context, {
+    forces: {
+      manyBody: {
+        strength: -100
+      },
+      link: {
+        distance: 180
+      },
+      radial: {
+        radius: 200,
+        strength: 0.05
+      }
+    },
+    attributes: {
+      radius: (node) => node.data?.type === "schema" ? 24 : 12
+    }
+  }), []);
+  const filteredRef = useRef();
+  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
+  useEffect(() => {
+    void projector.start();
+  }, [
+    match
+  ]);
+  const [colorMap] = useState(/* @__PURE__ */ new Map());
+  if (!model) {
+    return null;
+  }
+  if (selected) {
+    return /* @__PURE__ */ React.createElement(Tree, {
+      space,
+      selected,
+      variant: "tidy",
+      onNodeClick: () => setSelected(void 0)
+    });
+  }
+  return /* @__PURE__ */ React.createElement(SVGRoot, {
+    context
+  }, /* @__PURE__ */ React.createElement(SVG, {
+    className: mx(defaultStyles, slots?.root?.className)
+  }, /* @__PURE__ */ React.createElement(Markers, {
+    arrowSize: 6
+  }), /* @__PURE__ */ React.createElement(Grid, {
+    className: slots?.grid?.className ?? defaultGridStyles(themeMode)
+  }), /* @__PURE__ */ React.createElement(Zoom, {
+    extent: [
+      1 / 2,
+      4
+    ]
+  }, /* @__PURE__ */ React.createElement(GraphComponent, {
+    model,
+    projector,
+    drag: true,
+    arrows: true,
+    onSelect: (node) => setSelected(node?.data?.id),
+    labels: {
+      text: (node) => {
+        if (filteredRef.current?.length && !filteredRef.current.some((object) => object.id === node.data?.id)) {
+          return void 0;
+        }
+        return node.data?.label ?? node.data?.title ?? node.data?.name ?? node.data?.id.slice(0, 8);
+      }
+    },
+    attributes: {
+      node: (node) => {
+        let className;
+        if (node.data) {
+          const typename = getType2(node.data)?.objectId;
+          if (typename) {
+            className = colorMap.get(typename);
+            if (!className) {
+              className = colors[colorMap.size % colors.length];
+              colorMap.set(typename, className);
+            }
+          }
+        }
+        const selected2 = filteredRef.current?.some((object) => object.id === node.data?.id);
+        return {
+          class: mx(filteredRef.current?.length ? selected2 ? [
+            className
+          ] : "[&>text]:!fill-neutral-300" : [
+            "[&>text]:!fill-neutral-700",
+            className
+          ])
+        };
+      },
+      link: () => ({
+        class: "[&>path]:!stroke-neutral-300"
+      })
+    }
+  }))));
+};
+
+// packages/plugins/experimental/plugin-explorer/src/components/Tree/Tree.tsx
+var defaultTreeLayoutSlots = {
+  node: "fill-blue-600",
+  path: "fill-none stroke-blue-400 stroke-[0.5px]",
+  text: "stroke-[0.5px] stroke-neutral-700 text-xs"
+};
+var renderers = /* @__PURE__ */ new Map([
+  [
+    "tidy",
+    TidyTree_default
+  ],
+  [
+    "radial",
+    RadialTree_default
+  ],
+  [
+    "edge",
+    HierarchicalEdgeBundling_default
+  ]
+]);
+var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
+  const model = useMemo2(() => space ? new SpaceGraphModel().open(space, selected) : void 0, [
+    space,
+    selected
+  ]);
+  const [tree3, setTree] = useState2();
+  useEffect2(() => {
+    return model?.subscribe(() => {
+      const tree4 = mapGraphToTreeData(model);
+      setTree(tree4);
+    }, true);
+  }, [
+    model
+  ]);
+  const context = createSvgContext2();
+  const { ref, width = 0, height = 0 } = useResizeDetector();
+  useEffect2(() => {
+    if (width && height) {
+      const size = Math.min(width, height);
+      const radius = size * 0.4;
+      const options = {
+        // TODO(burdon): Type.
+        label: (d) => d.label ?? d.id,
+        width,
+        height,
+        radius,
+        marginLeft: (width - radius * 2) / 2,
+        marginRight: (width - radius * 2) / 2,
+        marginTop: (height - radius * 2) / 2,
+        marginBottom: (height - radius * 2) / 2,
+        slots: defaultTreeLayoutSlots
+      };
+      if (tree3) {
+        const renderer = renderers.get(variant);
+        renderer?.(context.ref.current, tree3, options);
+      }
+    }
+  }, [
+    tree3,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref,
+    className: "flex grow overflow-hidden",
+    onClick: () => onNodeClick?.()
+  }, /* @__PURE__ */ React2.createElement(SVGRoot2, {
+    context
+  }, /* @__PURE__ */ React2.createElement(SVG2, null)));
+};
+
+export {
+  SpaceGraphModel,
+  defaultTreeLayoutSlots,
+  Tree,
+  Graph
+};
+//# sourceMappingURL=chunk-XKITKIPQ.mjs.map