@dxos/plugin-explorer 0.8.4-main.72ec0f3 → 0.8.4-main.7996785055

package/dist/lib/node-esm/ExplorerContainer-KFHE5KU3.mjs

@@ -0,0 +1,49 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  D3ForceGraph,
+  useGraphModel
+} from "./chunk-35JCF4SD.mjs";
+import "./chunk-HSLMI22Q.mjs";
+
+// src/containers/ExplorerContainer/ExplorerContainer.tsx
+import React, { useCallback, useMemo, useState } from "react";
+import { QueryBuilder } from "@dxos/echo-query";
+import { useGlobalSearch } from "@dxos/plugin-search";
+import { getSpace, useObject } from "@dxos/react-client/echo";
+import { Panel, Toolbar } from "@dxos/react-ui";
+import { QueryEditor } from "@dxos/react-ui-components";
+var ExplorerContainer = ({ role, subject: view }) => {
+  useObject(view);
+  const space = view && getSpace(view);
+  const [filter, setFilter] = useState();
+  const model = useGraphModel(space, filter);
+  const { match } = useGlobalSearch();
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback((value) => {
+    setFilter(builder.build(value).filter);
+  }, []);
+  const showToolbar = role === "article";
+  if (!space || !model) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(Panel.Root, {
+    role
+  }, showToolbar && /* @__PURE__ */ React.createElement(Panel.Toolbar, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Toolbar.Root, null, /* @__PURE__ */ React.createElement(QueryEditor, {
+    db: space.db,
+    onChange: handleChange
+  }))), /* @__PURE__ */ React.createElement(Panel.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(D3ForceGraph, {
+    model,
+    match
+  })));
+};
+
+// src/containers/ExplorerContainer/index.ts
+var ExplorerContainer_default = ExplorerContainer;
+export {
+  ExplorerContainer_default as default
+};
+//# sourceMappingURL=ExplorerContainer-KFHE5KU3.mjs.map

package/dist/lib/node-esm/ExplorerContainer-KFHE5KU3.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ExplorerContainer/ExplorerContainer.tsx", "../../../src/containers/ExplorerContainer/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type SurfaceComponentProps } from '@dxos/app-toolkit/ui';\nimport { type Filter } from '@dxos/echo';\nimport { type View } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace, useObject } from '@dxos/react-client/echo';\nimport { Panel, Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\n\nimport { D3ForceGraph } from '../../components';\nimport { useGraphModel } from '../../hooks';\n\nexport type ExplorerContainerProps = SurfaceComponentProps<View.View>;\n\nexport const ExplorerContainer = ({ role, subject: view }: ExplorerContainerProps) => {\n  useObject(view);\n  const space = view && getSpace(view);\n  const [filter, setFilter] = useState<Filter.Any>();\n  const model = useGraphModel(space, filter);\n  const { match } = useGlobalSearch();\n\n  const builder = useMemo(() => new QueryBuilder(), []);\n  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {\n    setFilter(builder.build(value).filter);\n  }, []);\n\n  const showToolbar = role === 'article';\n\n  if (!space || !model) {\n    return null;\n  }\n\n  return (\n    <Panel.Root role={role}>\n      {showToolbar && (\n        <Panel.Toolbar asChild>\n          <Toolbar.Root>\n            <QueryEditor db={space.db} onChange={handleChange} />\n          </Toolbar.Root>\n        </Panel.Toolbar>\n      )}\n      <Panel.Content asChild>\n        <D3ForceGraph model={model} match={match} />\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ExplorerContainer } from './ExplorerContainer';\n\nexport default ExplorerContainer;\n"],
+  "mappings": ";;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAKtD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,UAAUC,iBAAiB;AACpC,SAASC,OAAOC,eAAe;AAC/B,SAASC,mBAA0C;AAO5C,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,SAASC,KAAI,MAA0B;AAC/EC,YAAUD,IAAAA;AACV,QAAME,QAAQF,QAAQG,SAASH,IAAAA;AAC/B,QAAM,CAACI,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,QAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,QAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,QAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,QAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,cAAUM,QAAQM,MAAMD,KAAAA,EAAOZ,MAAM;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMc,cAAcpB,SAAS;AAE7B,MAAI,CAACI,SAAS,CAACK,OAAO;AACpB,WAAO;EACT;AAEA,SACE,sBAAA,cAACY,MAAMC,MAAI;IAACtB;KACToB,eACC,sBAAA,cAACC,MAAME,SAAO;IAACC,SAAAA;KACb,sBAAA,cAACD,QAAQD,MAAI,MACX,sBAAA,cAACG,aAAAA;IAAYC,IAAItB,MAAMsB;IAAIC,UAAUX;QAI3C,sBAAA,cAACK,MAAMO,SAAO;IAACJ,SAAAA;KACb,sBAAA,cAACK,cAAAA;IAAapB;IAAcE;;AAIpC;;;AC9CA,IAAA,4BAAemB;",
+  "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "useObject", "Panel", "Toolbar", "QueryEditor", "ExplorerContainer", "role", "subject", "view", "useObject", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "Panel", "Root", "Toolbar", "asChild", "QueryEditor", "db", "onChange", "Content", "D3ForceGraph", "ExplorerContainer"]
+}

package/dist/lib/node-esm/{chunk-NPIP4VEH.mjs → chunk-35JCF4SD.mjs}

@@ -1,7 +1,6 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // src/components/Chart/Chart.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
 import * as Plot from "@observablehq/plot";
 import React, { useEffect } from "react";
 import { useResizeDetector } from "react-resize-detector";
@@ -19,49 +18,43 @@ var defaultOptions = {
   fillOpacity: 0.2
 };
 var Chart = ({ items = [], accessor, options = defaultOptions }) => {
-  var _effect = _useSignals();
-  try {
-    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
-      refreshRate: 200
-    });
-    useEffect(() => {
-      if (!width || !height) {
-        return;
-      }
-      const plot3 = Plot.plot({
-        grid: true,
-        width,
-        height,
-        style: {
-          background: "transparent"
-        },
-        marks: [
-          Plot.frame(),
-          Plot.dot(items, {
-            x: createAdapter("x", accessor),
-            y: createAdapter("y", accessor),
-            ...options
-          })
-        ]
-      });
-      containerRef.current.append(plot3);
-      return () => plot3?.remove();
-    }, [
-      items,
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
+    refreshRate: 200
+  });
+  useEffect(() => {
+    if (!width || !height) {
+      return;
+    }
+    const plot3 = Plot.plot({
+      grid: true,
       width,
-      height
-    ]);
-    return /* @__PURE__ */ React.createElement("div", {
-      ref: containerRef,
-      className: "grow"
+      height,
+      style: {
+        background: "transparent"
+      },
+      marks: [
+        Plot.frame(),
+        Plot.dot(items, {
+          x: createAdapter("x", accessor),
+          y: createAdapter("y", accessor),
+          ...options
+        })
+      ]
     });
-  } finally {
-    _effect.f();
-  }
+    containerRef.current.append(plot3);
+    return () => plot3?.remove();
+  }, [
+    items,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: containerRef,
+    className: "grow"
+  });
 };
 
 // src/components/Globe/Globe.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
 import * as Plot2 from "@observablehq/plot";
 import React2, { useEffect as useEffect2 } from "react";
 import { useResizeDetector as useResizeDetector2 } from "react-resize-detector";
@@ -10775,70 +10768,246 @@ var defaultOptions2 = {
   fill: "#003300"
 };
 var Globe = ({ items = [], accessor, projection = "orthographic", options = defaultOptions2 }) => {
-  var _effect = _useSignals2();
-  try {
-    const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
-      refreshRate: 200
-    });
-    const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
-    useEffect2(() => {
-      if (!width || !height) {
-        return;
-      }
-      const plot3 = Plot2.plot({
-        // https://observablehq.com/plot/features/projections
-        projection: {
-          type: projection,
-          rotate: [
-            -100,
-            -20
-          ]
-        },
-        // projection: { type: 'equirectangular', rotate: [-140, -30] },
-        width,
-        height,
-        style: {
-          background: "transparent"
-        },
-        // TODO(burdon): Create simple wrapper for Plot with good defaults.
-        marks: [
-          Plot2.sphere({
-            fill: "lightblue",
-            fillOpacity: 0.5
-          }),
-          Plot2.geo(land, {
-            fill: "darkgreen",
-            fillOpacity: 0.5
-          }),
-          Plot2.graticule(),
-          Plot2.dot(items, {
-            x: createAdapter("lat", accessor),
-            y: createAdapter("lng", accessor),
-            ...options
-          })
+  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector2({
+    refreshRate: 200
+  });
+  const land = topojson.feature(countries_110m_default, countries_110m_default.objects.land);
+  useEffect2(() => {
+    if (!width || !height) {
+      return;
+    }
+    const plot3 = Plot2.plot({
+      // https://observablehq.com/plot/features/projections
+      projection: {
+        type: projection,
+        rotate: [
+          -100,
+          -20
         ]
-      });
-      containerRef.current.append(plot3);
-      return () => plot3?.remove();
-    }, [
-      items,
+      },
+      // projection: { type: 'equirectangular', rotate: [-140, -30] },
       width,
-      height
-    ]);
-    return /* @__PURE__ */ React2.createElement("div", {
-      ref: containerRef,
-      className: "grow p-4"
+      height,
+      style: {
+        background: "transparent"
+      },
+      // TODO(burdon): Create simple wrapper for Plot with good defaults.
+      marks: [
+        Plot2.sphere({
+          fill: "lightblue",
+          fillOpacity: 0.5
+        }),
+        Plot2.geo(land, {
+          fill: "darkgreen",
+          fillOpacity: 0.5
+        }),
+        Plot2.graticule(),
+        Plot2.dot(items, {
+          x: createAdapter("lat", accessor),
+          y: createAdapter("lng", accessor),
+          ...options
+        })
+      ]
     });
-  } finally {
-    _effect.f();
+    containerRef.current.append(plot3);
+    return () => plot3?.remove();
+  }, [
+    items,
+    width,
+    height
+  ]);
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: containerRef,
+    className: "grow p-4"
+  });
+};
+
+// src/components/Graph/D3ForceGraph.tsx
+import { Atom, useAtomValue } from "@effect-atom/atom-react";
+import React3, { useCallback, useEffect as useEffect3, useMemo, useRef } from "react";
+import { Obj } from "@dxos/echo";
+import { SelectionModel } from "@dxos/graph";
+import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
+import { composable, composableProps, getHashStyles } from "@dxos/ui-theme";
+import "@dxos/react-ui-graph/styles/graph.css";
+var EMPTY_ATOM = Atom.make({
+  nodes: [],
+  edges: []
+});
+var D3ForceGraph = composable(({ model, selection: _selection, grid, drag, ...props }, forwardedRef) => {
+  useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
+  const svgRef = useRef(null);
+  const projector = useMemo(() => {
+    if (svgRef.current) {
+      return new GraphForceProjector(svgRef.current, {
+        attributes: {
+          linkForce: (edge) => {
+            return edge.data?.object?.active !== false;
+          }
+        },
+        forces: {
+          point: {
+            strength: 0.01
+          }
+        }
+      });
+    }
+  }, []);
+  const graph = useRef(null);
+  const selection = useMemo(() => _selection ?? new SelectionModel(), [
+    _selection
+  ]);
+  useEffect3(() => selection.subscribe(() => graph.current?.repaint()), [
+    selection
+  ]);
+  const handleSelect = useCallback((node) => {
+    if (selection.contains(node.id)) {
+      selection.remove(node.id);
+    } else {
+      selection.add(node.id);
+    }
+  }, [
+    selection
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps(props, {
+      role: "none",
+      classNames: "dx-container"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(SVG.Root, {
+    ref: svgRef
+  }, /* @__PURE__ */ React3.createElement(SVG.Markers, null), grid && /* @__PURE__ */ React3.createElement(SVG.Grid, {
+    axis: true
+  }), /* @__PURE__ */ React3.createElement(SVG.Zoom, {
+    extent: [
+      1 / 2,
+      2
+    ]
+  }, /* @__PURE__ */ React3.createElement(SVG.Graph, {
+    drag,
+    ref: graph,
+    model,
+    projector,
+    labels: {
+      text: (node) => {
+        return node.data?.data.label ?? node.id;
+      }
+    },
+    attributes: {
+      node: (node) => {
+        const obj = node.data?.data.object;
+        return {
+          data: {
+            color: getHashStyles(obj && Obj.getTypename(obj))?.hue
+          },
+          classes: {
+            "dx-selected": selection.contains(node.id)
+          }
+        };
+      }
+    },
+    onSelect: handleSelect
+  }))));
+});
+
+// src/components/Graph/ForceGraph.tsx
+import { forceLink, forceManyBody } from "d3";
+import NativeForceGraph from "force-graph";
+import React4, { useEffect as useEffect4, useRef as useRef2, useState } from "react";
+import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
+import { filterObjectsSync } from "@dxos/plugin-search";
+
+// src/components/Graph/adapter.ts
+var GraphAdapter = class {
+  graph;
+  _nodes = [];
+  _links = [];
+  constructor(graph) {
+    this.graph = graph;
+    this._nodes = graph.nodes.map((node) => ({
+      id: node.id,
+      type: node.type,
+      data: node.data
+    }));
+    const nodeIds = new Set(this._nodes.map((node) => node.id));
+    this._links = graph.edges.filter((edge) => nodeIds.has(edge.source) && nodeIds.has(edge.target)).map((edge) => ({
+      type: edge.type,
+      source: edge.source,
+      target: edge.target,
+      data: edge.data
+    }));
+  }
+  get nodes() {
+    return this._nodes;
+  }
+  get links() {
+    return this._links;
   }
 };
 
+// src/components/Graph/ForceGraph.tsx
+var ForceGraph = ({ model, match }) => {
+  const { ref, width, height } = useResizeDetector3({
+    refreshRate: 200
+  });
+  const rootRef = useRef2(null);
+  const forceGraph = useRef2(null);
+  const filteredRef = useRef2([]);
+  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
+  const [data, setData] = useState();
+  useEffect4(() => {
+    return model?.subscribe((model2) => {
+      setData(new GraphAdapter(model2.graph));
+    });
+  }, [
+    model
+  ]);
+  useEffect4(() => {
+    if (rootRef.current) {
+      forceGraph.current = new NativeForceGraph(rootRef.current).nodeRelSize(6).nodeLabel((node) => node.type === "schema" ? node.data.typename : node.data.label ?? node.id).nodeAutoColorBy((node) => node.type === "schema" ? "schema" : node.data.typename).linkAutoColorBy((link2) => link2.type);
+    }
+    return () => {
+      forceGraph.current?.pauseAnimation().graphData({
+        nodes: [],
+        links: []
+      });
+      forceGraph.current = null;
+    };
+  }, []);
+  useEffect4(() => {
+    if (!data || !width || !height || !forceGraph.current) {
+      return;
+    }
+    forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
+      handleZoomToFit();
+    }).onNodeClick((node) => {
+      forceGraph.current?.emitParticle(node);
+    }).d3Force("link", forceLink().distance(160).strength(0.5)).d3Force("charge", forceManyBody().strength(-30)).graphData(data).warmupTicks(100).cooldownTime(1e3).resumeAnimation();
+  }, [
+    data,
+    width,
+    height,
+    forceGraph.current
+  ]);
+  const handleZoomToFit = () => {
+    forceGraph.current?.zoomToFit(400, 40);
+  };
+  return /* @__PURE__ */ React4.createElement("div", {
+    ref,
+    className: "relative grow",
+    onClick: handleZoomToFit
+  }, /* @__PURE__ */ React4.createElement("div", {
+    ref: rootRef,
+    className: "absolute inset-0"
+  }));
+};
+
 // src/components/Tree/Tree.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
-import React3, { useEffect as useEffect3, useRef, useState } from "react";
+import { RegistryContext } from "@effect-atom/atom-react";
+import React5, { useContext, useEffect as useEffect5, useRef as useRef3, useState as useState2 } from "react";
 import { useAsyncState } from "@dxos/react-ui";
-import { SVG } from "@dxos/react-ui-graph";
+import { SVG as SVG2 } from "@dxos/react-ui-graph";
 import { SpaceGraphModel } from "@dxos/schema";
 
 // src/components/Tree/layout/HierarchicalEdgeBundling.ts
@@ -10976,7 +11145,8 @@ var TidyTree_default = TidyTree;
 
 // src/components/Tree/types/tree.ts
 import * as Schema from "effect/Schema";
-import { Key, Obj, Type } from "@dxos/echo";
+import { Key, Obj as Obj2, Ref, Type } from "@dxos/echo";
+import { TestSchema } from "@dxos/echo/testing";
 import { invariant } from "@dxos/invariant";
 var TreeNodeType = Schema.Struct({
   id: Key.ObjectId,
@@ -10985,7 +11155,7 @@ var TreeNodeType = Schema.Struct({
     key: Schema.String,
     value: Schema.Any
   })),
-  ref: Schema.optional(Type.Ref(Type.Expando))
+  ref: Schema.optional(Ref.Ref(TestSchema.Expando))
 }).pipe(Schema.mutable);
 var TreeType = Schema.Struct({
   root: Key.ObjectId,
@@ -10993,8 +11163,8 @@ var TreeType = Schema.Struct({
     key: Key.ObjectId,
     value: TreeNodeType
   }))
-}).pipe(Type.Obj({
-  typename: "dxos.org/type/Tree",
+}).pipe(Type.object({
+  typename: "org.dxos.type.tree",
   version: "0.1.0"
 }));
 
@@ -11025,67 +11195,98 @@ var renderers = /* @__PURE__ */ new Map([
   ]
 ]);
 var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
-  var _effect = _useSignals3();
-  try {
-    const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space) : void 0, [
-      space,
-      selected
-    ]);
-    const [tree3, setTree] = useState();
-    useEffect3(() => {
-      return model?.subscribe(() => {
-        const tree4 = mapGraphToTreeData(model);
-        setTree(tree4);
-      }, true);
-    }, [
-      model
-    ]);
-    const context = useRef(null);
-    useEffect3(() => {
-      if (context.current?.size) {
-        const { width, height } = context.current.size;
-        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.current.svg, tree3, options);
-        }
+  const registry = useContext(RegistryContext);
+  const [model] = useAsyncState(async () => space ? new SpaceGraphModel(registry).open(space.db) : void 0, [
+    space,
+    selected,
+    registry
+  ]);
+  const [tree3, setTree] = useState2();
+  useEffect5(() => {
+    return model?.subscribe(() => {
+      const tree4 = mapGraphToTreeData(model);
+      setTree(tree4);
+    }, true);
+  }, [
+    model
+  ]);
+  const context = useRef3(null);
+  useEffect5(() => {
+    if (context.current?.size) {
+      const { width, height } = context.current.size;
+      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.current.svg, tree3, options);
       }
-    }, [
-      context.current,
-      tree3
-    ]);
-    return /* @__PURE__ */ React3.createElement("div", {
-      onClick: () => onNodeClick?.()
-    }, /* @__PURE__ */ React3.createElement(SVG.Root, {
-      ref: context
-    }));
-  } finally {
-    _effect.f();
-  }
+    }
+  }, [
+    context.current,
+    tree3
+  ]);
+  return /* @__PURE__ */ React5.createElement("div", {
+    className: "grow",
+    onClick: () => onNodeClick?.()
+  }, /* @__PURE__ */ React5.createElement(SVG2.Root, {
+    ref: context
+  }));
 };
 
-// src/components/index.ts
-import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-N3S5KSUX.mjs"));
+// src/hooks/useGraphModel.ts
+import { useEffect as useEffect6, useState as useState3 } from "react";
+import { Capabilities } from "@dxos/app-framework";
+import { useCapability } from "@dxos/app-framework/ui";
+import { SpaceGraphModel as SpaceGraphModel2 } from "@dxos/schema";
+var useGraphModel = (space, filter, options, queue) => {
+  const registry = useCapability(Capabilities.AtomRegistry);
+  const [model, setModel] = useState3(void 0);
+  useEffect6(() => {
+    if (!space) {
+      setModel(void 0);
+      return;
+    }
+    const newModel = new SpaceGraphModel2(registry);
+    void newModel.open(space.db, queue);
+    setModel(newModel);
+    return () => {
+      setModel(void 0);
+      void newModel.close();
+    };
+  }, [
+    space,
+    registry,
+    queue
+  ]);
+  useEffect6(() => {
+    model?.setFilter(filter).setOptions(options);
+  }, [
+    model,
+    filter,
+    options
+  ]);
+  return model;
+};
 
 export {
   Chart,
   Globe,
+  D3ForceGraph,
+  ForceGraph,
   defaultTreeLayoutSlots,
   Tree,
-  ExplorerContainer
+  useGraphModel
 };
-//# sourceMappingURL=chunk-NPIP4VEH.mjs.map
+//# sourceMappingURL=chunk-35JCF4SD.mjs.map