@dxos/plugin-explorer 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

package/dist/lib/neutral/ExplorerContainer-BOXGUSRG.mjs

@@ -0,0 +1,41 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/containers/ExplorerContainer/ExplorerContainer.tsx
+import React, { useCallback, useMemo, useState } from "react";
+import { Obj } from "@dxos/echo";
+import { QueryBuilder } from "@dxos/echo-query";
+import { useObject } from "@dxos/react-client/echo";
+import { Panel, Toolbar } from "@dxos/react-ui";
+import { QueryEditor } from "@dxos/react-ui-components";
+import { ForceGraph } from "#components";
+import { useGraphModel } from "#hooks";
+var ExplorerContainer = ({ role, subject, attendableId: _attendableId }) => {
+  const [view] = useObject(subject);
+  const db = view && Obj.getDatabase(view);
+  const [filter, setFilter] = useState();
+  const model = useGraphModel(db, filter);
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback((value) => {
+    setFilter(builder.build(value).filter);
+  }, []);
+  const showToolbar = role === "article";
+  if (!db || !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,
+    onChange: handleChange
+  }))), /* @__PURE__ */ React.createElement(Panel.Content, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(ForceGraph, {
+    model
+  })));
+};
+export {
+  ExplorerContainer as default
+};
+//# sourceMappingURL=ExplorerContainer-BOXGUSRG.mjs.map

package/dist/lib/neutral/ExplorerContainer-BOXGUSRG.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/containers/ExplorerContainer/ExplorerContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type AppSurface } from '@dxos/app-toolkit/ui';\nimport { type Filter, Obj, type View } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useObject } from '@dxos/react-client/echo';\nimport { Panel, Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\n\nimport { ForceGraph } from '#components';\nimport { useGraphModel } from '#hooks';\n\nexport type ExplorerContainerProps = AppSurface.ObjectArticleProps<View.View>;\n\nexport const ExplorerContainer = ({ role, subject, attendableId: _attendableId }: ExplorerContainerProps) => {\n  const [view] = useObject(subject);\n  const db = view && Obj.getDatabase(view);\n  const [filter, setFilter] = useState<Filter.Any>();\n  const model = useGraphModel(db, filter);\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 (!db || !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={db} onChange={handleChange} />\n          </Toolbar.Root>\n        </Panel.Toolbar>\n      )}\n      <Panel.Content asChild>\n        <ForceGraph model={model} />\n      </Panel.Content>\n    </Panel.Root>\n  );\n};\n"],
+  "mappings": ";;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAGtD,SAAsBC,WAAsB;AAC5C,SAASC,oBAAoB;AAC7B,SAASC,iBAAiB;AAC1B,SAASC,OAAOC,eAAe;AAC/B,SAASC,mBAA0C;AAEnD,SAASC,kBAAkB;AAC3B,SAASC,qBAAqB;AAIvB,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,SAASC,cAAcC,cAAa,MAA0B;AACtG,QAAM,CAACC,IAAAA,IAAQX,UAAUQ,OAAAA;AACzB,QAAMI,KAAKD,QAAQb,IAAIe,YAAYF,IAAAA;AACnC,QAAM,CAACG,QAAQC,SAAAA,IAAalB,SAAAA;AAC5B,QAAMmB,QAAQX,cAAcO,IAAIE,MAAAA;AAEhC,QAAMG,UAAUrB,QAAQ,MAAM,IAAIG,aAAAA,GAAgB,CAAA,CAAE;AACpD,QAAMmB,eAAevB,YAAuD,CAACwB,UAAAA;AAC3EJ,cAAUE,QAAQG,MAAMD,KAAAA,EAAOL,MAAM;EACvC,GAAG,CAAA,CAAE;AAEL,QAAMO,cAAcd,SAAS;AAE7B,MAAI,CAACK,MAAM,CAACI,OAAO;AACjB,WAAO;EACT;AAEA,SACE,sBAAA,cAACf,MAAMqB,MAAI;IAACf;KACTc,eACC,sBAAA,cAACpB,MAAMC,SAAO;IAACqB,SAAAA;KACb,sBAAA,cAACrB,QAAQoB,MAAI,MACX,sBAAA,cAACnB,aAAAA;IAAYS;IAAQY,UAAUN;QAIrC,sBAAA,cAACjB,MAAMwB,SAAO;IAACF,SAAAA;KACb,sBAAA,cAACnB,YAAAA;IAAWY;;AAIpB;",
+  "names": ["React", "useCallback", "useMemo", "useState", "Obj", "QueryBuilder", "useObject", "Panel", "Toolbar", "QueryEditor", "ForceGraph", "useGraphModel", "ExplorerContainer", "role", "subject", "attendableId", "_attendableId", "view", "db", "getDatabase", "filter", "setFilter", "model", "builder", "handleChange", "value", "build", "showToolbar", "Root", "asChild", "onChange", "Content"]
+}

package/dist/lib/neutral/ExplorerPlugin.mjs

@@ -0,0 +1,26 @@
+import "./chunk-J5LGTIGS.mjs";
+
+// src/ExplorerPlugin.tsx
+import { Plugin } from "@dxos/app-framework";
+import { AppPlugin } from "@dxos/app-toolkit";
+import { CreateObject, ReactSurface } from "#capabilities";
+import { meta } from "#meta";
+import { translations } from "#translations";
+import { Graph } from "#types";
+var ExplorerPlugin = Plugin.define(meta).pipe(AppPlugin.addCreateObjectModule({
+  activate: CreateObject
+}), AppPlugin.addSchemaModule({
+  schema: [
+    Graph.Graph
+  ]
+}), AppPlugin.addSurfaceModule({
+  activate: ReactSurface
+}), AppPlugin.addTranslationsModule({
+  translations
+}), Plugin.make);
+var ExplorerPlugin_default = ExplorerPlugin;
+export {
+  ExplorerPlugin,
+  ExplorerPlugin_default as default
+};
+//# sourceMappingURL=ExplorerPlugin.mjs.map

package/dist/lib/neutral/ExplorerPlugin.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/ExplorerPlugin.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Plugin } from '@dxos/app-framework';\nimport { AppPlugin } from '@dxos/app-toolkit';\n\nimport { CreateObject, ReactSurface } from '#capabilities';\nimport { meta } from '#meta';\nimport { translations } from '#translations';\nimport { Graph } from '#types';\n\nexport const ExplorerPlugin = Plugin.define(meta).pipe(\n  AppPlugin.addCreateObjectModule({ activate: CreateObject }),\n  AppPlugin.addSchemaModule({ schema: [Graph.Graph] }),\n  AppPlugin.addSurfaceModule({ activate: ReactSurface }),\n  AppPlugin.addTranslationsModule({ translations }),\n  Plugin.make,\n);\n\nexport default ExplorerPlugin;\n"],
+  "mappings": ";;;AAIA,SAASA,cAAc;AACvB,SAASC,iBAAiB;AAE1B,SAASC,cAAcC,oBAAoB;AAC3C,SAASC,YAAY;AACrB,SAASC,oBAAoB;AAC7B,SAASC,aAAa;AAEf,IAAMC,iBAAiBP,OAAOQ,OAAOJ,IAAAA,EAAMK,KAChDR,UAAUS,sBAAsB;EAAEC,UAAUT;AAAa,CAAA,GACzDD,UAAUW,gBAAgB;EAAEC,QAAQ;IAACP,MAAMA;;AAAO,CAAA,GAClDL,UAAUa,iBAAiB;EAAEH,UAAUR;AAAa,CAAA,GACpDF,UAAUc,sBAAsB;EAAEV;AAAa,CAAA,GAC/CL,OAAOgB,IAAI;AAGb,IAAA,yBAAeT;",
+  "names": ["Plugin", "AppPlugin", "CreateObject", "ReactSurface", "meta", "translations", "Graph", "ExplorerPlugin", "define", "pipe", "addCreateObjectModule", "activate", "addSchemaModule", "schema", "addSurfaceModule", "addTranslationsModule", "make"]
+}

package/dist/lib/neutral/capabilities/index.mjs

@@ -0,0 +1,11 @@
+import "../chunk-J5LGTIGS.mjs";
+
+// src/capabilities/index.ts
+import { Capability } from "@dxos/app-framework";
+var CreateObject = Capability.lazy("CreateObject", () => import("../create-object-F6TKVAGV.mjs"));
+var ReactSurface = Capability.lazy("ReactSurface", () => import("../react-surface-U3JEY7V7.mjs"));
+export {
+  CreateObject,
+  ReactSurface
+};
+//# sourceMappingURL=index.mjs.map

package/dist/lib/neutral/capabilities/index.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/capabilities/index.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { Capability } from '@dxos/app-framework';\n\nexport const CreateObject = Capability.lazy('CreateObject', () => import('./create-object'));\nexport const ReactSurface = Capability.lazy('ReactSurface', () => import('./react-surface'));\n"],
+  "mappings": ";;;AAIA,SAASA,kBAAkB;AAEpB,IAAMC,eAAeD,WAAWE,KAAK,gBAAgB,MAAM,OAAO,+BAAA,CAAA;AAClE,IAAMC,eAAeH,WAAWE,KAAK,gBAAgB,MAAM,OAAO,+BAAA,CAAA;",
+  "names": ["Capability", "CreateObject", "lazy", "ReactSurface"]
+}

package/dist/lib/{browser/types/index.mjs → neutral/chunk-7SPMPHRS.mjs}

@@ -1,6 +1,6 @@
 import {
   __export
-} from "../chunk-J5LGTIGS.mjs";
+} from "./chunk-J5LGTIGS.mjs";
 
 // src/types/ExplorerAction.ts
 var ExplorerAction_exports = {};
@@ -8,7 +8,7 @@ __export(ExplorerAction_exports, {
   GraphProps: () => GraphProps
 });
 import * as Schema from "effect/Schema";
-import { TypeInputOptionsAnnotation } from "@dxos/plugin-space/types";
+import { TypeInputOptionsAnnotation } from "@dxos/plugin-space";
 var GraphProps = Schema.Struct({
   name: Schema.optional(Schema.String),
   // TODO(wittjosiah): This should be a query input instead.
@@ -32,8 +32,7 @@ __export(Graph_exports, {
   make: () => make
 });
 import * as Schema2 from "effect/Schema";
-import { Annotation, Filter, Obj, Query, QueryAST, Ref, Type } from "@dxos/echo";
-import { View } from "@dxos/echo";
+import { Annotation, Filter, Obj, Query, QueryAST, Ref, Type, View } from "@dxos/echo";
 import { FormInputAnnotation, LabelAnnotation } from "@dxos/echo/internal";
 import { ViewAnnotation } from "@dxos/schema";
 var GraphSchema = Schema2.Struct({
@@ -48,7 +47,9 @@ var GraphSchema = Schema2.Struct({
   version: "0.1.0"
 }), LabelAnnotation.set([
   "name"
-]), ViewAnnotation.set(true), Annotation.IconAnnotation.set({
+]), ViewAnnotation.set([
+  "view"
+]), Annotation.IconAnnotation.set({
   icon: "ph--graph--regular",
   hue: "green"
 }));
@@ -63,8 +64,9 @@ var make = ({ name, query = {
     query
   });
 };
+
 export {
-  ExplorerAction_exports as ExplorerAction,
-  Graph_exports as Graph
+  ExplorerAction_exports,
+  Graph_exports
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=chunk-7SPMPHRS.mjs.map

package/dist/lib/neutral/chunk-7SPMPHRS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/ExplorerAction.ts", "../../../src/types/Graph.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { TypeInputOptionsAnnotation } from '@dxos/plugin-space';\n\nexport const GraphProps = Schema.Struct({\n  name: Schema.optional(Schema.String),\n  // TODO(wittjosiah): This should be a query input instead.\n  typename: Schema.String.pipe(\n    Schema.annotations({ title: 'Select type' }),\n    TypeInputOptionsAnnotation.set({\n      location: ['database', 'runtime'],\n      kind: ['user'],\n    }),\n    Schema.optional,\n  ),\n});\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Annotation, Filter, Obj, Query, QueryAST, Ref, Type, View } from '@dxos/echo';\nimport { FormInputAnnotation, LabelAnnotation } from '@dxos/echo/internal';\nimport { ViewAnnotation } from '@dxos/schema';\n\nconst GraphSchema = Schema.Struct({\n  name: Schema.optional(Schema.String),\n\n  view: Ref.Ref(View.View).pipe(FormInputAnnotation.set(false)),\n\n  query: Schema.Struct({\n    raw: Schema.optional(Schema.String),\n    ast: QueryAST.Query,\n  }).pipe(FormInputAnnotation.set(false)),\n}).pipe(\n  Type.object({\n    typename: 'org.dxos.type.graph',\n    version: '0.1.0',\n  }),\n  LabelAnnotation.set(['name']),\n  ViewAnnotation.set(['view']),\n  Annotation.IconAnnotation.set({\n    icon: 'ph--graph--regular',\n    hue: 'green',\n  }),\n);\nexport interface Graph extends Schema.Schema.Type<typeof GraphSchema> {}\nexport const Graph: Type.Obj<Graph> = GraphSchema as any;\n\ntype MakeProps = Omit<Partial<Obj.MakeProps<typeof Graph>>, 'view'> & {\n  view: View.View;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const make = ({\n  name,\n  query = { raw: '', ast: Query.select(Filter.nothing()).ast },\n  view,\n}: MakeProps): Graph => {\n  return Obj.make(Graph, { name, view: Ref.make(view), query });\n};\n"],
+  "mappings": ";;;;;AAAA;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,kCAAkC;AAEpC,IAAMC,aAAoBC,cAAO;EACtCC,MAAaC,gBAAgBC,aAAM;;EAEnCC,UAAiBD,cAAOE,KACfC,mBAAY;IAAEC,OAAO;EAAc,CAAA,GAC1CT,2BAA2BU,IAAI;IAC7BC,UAAU;MAAC;MAAY;;IACvBC,MAAM;MAAC;;EACT,CAAA,GACOR,eAAQ;AAEnB,CAAA;;;ACnBA;;;;;AAIA,YAAYS,aAAY;AAExB,SAASC,YAAYC,QAAQC,KAAKC,OAAOC,UAAUC,KAAKC,MAAMC,YAAY;AAC1E,SAASC,qBAAqBC,uBAAuB;AACrD,SAASC,sBAAsB;AAE/B,IAAMC,cAAqBC,eAAO;EAChCC,MAAaC,iBAAgBC,cAAM;EAEnCC,MAAMX,IAAIA,IAAIE,KAAKA,IAAI,EAAEU,KAAKT,oBAAoBU,IAAI,KAAA,CAAA;EAEtDC,OAAcP,eAAO;IACnBQ,KAAYN,iBAAgBC,cAAM;IAClCM,KAAKjB,SAASD;EAChB,CAAA,EAAGc,KAAKT,oBAAoBU,IAAI,KAAA,CAAA;AAClC,CAAA,EAAGD,KACDX,KAAKgB,OAAO;EACVC,UAAU;EACVC,SAAS;AACX,CAAA,GACAf,gBAAgBS,IAAI;EAAC;CAAO,GAC5BR,eAAeQ,IAAI;EAAC;CAAO,GAC3BlB,WAAWyB,eAAeP,IAAI;EAC5BQ,MAAM;EACNC,KAAK;AACP,CAAA,CAAA;AAGK,IAAMC,QAAyBjB;AAS/B,IAAMkB,OAAO,CAAC,EACnBhB,MACAM,QAAQ;EAAEC,KAAK;EAAIC,KAAKlB,MAAM2B,OAAO7B,OAAO8B,QAAO,CAAA,EAAIV;AAAI,GAC3DL,KAAI,MACM;AACV,SAAOd,IAAI2B,KAAKD,OAAO;IAAEf;IAAMG,MAAMX,IAAIwB,KAAKb,IAAAA;IAAOG;EAAM,CAAA;AAC7D;",
+  "names": ["Schema", "TypeInputOptionsAnnotation", "GraphProps", "Struct", "name", "optional", "String", "typename", "pipe", "annotations", "title", "set", "location", "kind", "Schema", "Annotation", "Filter", "Obj", "Query", "QueryAST", "Ref", "Type", "View", "FormInputAnnotation", "LabelAnnotation", "ViewAnnotation", "GraphSchema", "Struct", "name", "optional", "String", "view", "pipe", "set", "query", "raw", "ast", "object", "typename", "version", "IconAnnotation", "icon", "hue", "Graph", "make", "select", "nothing"]
+}

package/dist/lib/{browser/chunk-LSUP47BZ.mjs → neutral/chunk-HPIS2WXY.mjs}

@@ -21,4 +21,4 @@ var meta = {
 export {
   meta
 };
-//# sourceMappingURL=chunk-LSUP47BZ.mjs.map
+//# sourceMappingURL=chunk-HPIS2WXY.mjs.map

package/dist/lib/{browser/chunk-LSUP47BZ.mjs.map → neutral/chunk-HPIS2WXY.mjs.map}

@@ -2,6 +2,6 @@
   "version": 3,
   "sources": ["../../../src/meta.ts"],
   "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Plugin } from '@dxos/app-framework';\nimport { trim } from '@dxos/util';\n\nexport const meta: Plugin.Meta = {\n  id: 'org.dxos.plugin.explorer',\n  name: 'Explorer',\n  description: trim`\n    Interactive hypergraph visualization that reveals relationships between objects in your workspace.\n    Navigate complex data structures and discover connections through a dynamic network view.\n  `,\n  icon: 'ph--graph--regular',\n  iconHue: 'green',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',\n  tags: ['labs'],\n  screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],\n};\n"],
-  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaC;;;;EAIbC,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
-  "names": ["trim", "meta", "id", "name", "description", "trim", "icon", "iconHue", "source", "tags", "screenshots"]
+  "mappings": ";AAKA,SAASA,YAAY;AAEd,IAAMC,OAAoB;EAC/BC,IAAI;EACJC,MAAM;EACNC,aAAaJ;;;;EAIbK,MAAM;EACNC,SAAS;EACTC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
+  "names": ["trim", "meta", "id", "name", "description", "icon", "iconHue", "source", "tags", "screenshots"]
 }

package/dist/lib/{browser → neutral/components}/index.mjs

@@ -1,7 +1,4 @@
-import {
-  meta
-} from "./chunk-LSUP47BZ.mjs";
-import "./chunk-J5LGTIGS.mjs";
+import "../chunk-J5LGTIGS.mjs";
 
 // src/components/Chart/Chart.tsx
 import * as Plot from "@observablehq/plot";
@@ -10825,102 +10822,14 @@ var Globe = ({ items = [], accessor, projection = "orthographic", options = defa
   });
 };
 
-// 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, {
-      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
+// src/components/Graph/CanvasForceGraph.tsx
 import { forceLink, forceManyBody } from "d3";
 import NativeForceGraph from "force-graph";
-import React4, { useEffect as useEffect4, useRef as useRef2, useState } from "react";
+import React3, { useCallback, useEffect as useEffect3, useRef, useState } from "react";
 import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
-import { filterObjectsSync } from "@dxos/plugin-search";
+import { composable, composableProps } from "@dxos/ui-theme";
 
-// src/components/Graph/adapter.ts
+// src/components/Graph/graph-adapter.ts
 var GraphAdapter = class {
   graph;
   _nodes = [];
@@ -10948,24 +10857,27 @@ var GraphAdapter = class {
   }
 };
 
-// src/components/Graph/ForceGraph.tsx
-var ForceGraph = ({ model, match }) => {
-  const { ref, width, height } = useResizeDetector3({
+// src/components/Graph/CanvasForceGraph.tsx
+var CanvasForceGraph = composable(({ model, match, onClick, ...props }, forwardedRef) => {
+  const { ref: resizeRef, width, height } = useResizeDetector3({
     refreshRate: 200
   });
-  const rootRef = useRef2(null);
-  const forceGraph = useRef2(null);
-  const filteredRef = useRef2([]);
-  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
+  const setRef = useCallback((node) => {
+    resizeRef(node);
+    assignRef(forwardedRef, node);
+  }, [
+    resizeRef,
+    forwardedRef
+  ]);
+  const rootRef = useRef(null);
+  const forceGraph = useRef(null);
   const [data, setData] = useState();
-  useEffect4(() => {
-    return model?.subscribe((model2) => {
-      setData(new GraphAdapter(model2.graph));
-    });
+  useEffect3(() => {
+    return model?.subscribe((model2) => setData(new GraphAdapter(model2.graph)));
   }, [
     model
   ]);
-  useEffect4(() => {
+  useEffect3(() => {
     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);
     }
@@ -10977,37 +10889,142 @@ var ForceGraph = ({ model, match }) => {
       forceGraph.current = null;
     };
   }, []);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!data || !width || !height || !forceGraph.current) {
       return;
     }
-    forceGraph.current.pauseAnimation().width(width).height(height).onEngineStop(() => {
-      handleZoomToFit();
-    }).onNodeClick((node) => {
+    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
+    height
   ]);
   const handleZoomToFit = () => {
     forceGraph.current?.zoomToFit(400, 40);
   };
-  return /* @__PURE__ */ React4.createElement("div", {
-    ref,
-    className: "relative grow",
-    onClick: handleZoomToFit
-  }, /* @__PURE__ */ React4.createElement("div", {
+  const handleClick = useCallback((event) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      handleZoomToFit();
+    }
+  }, [
+    onClick
+  ]);
+  return /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps(props, {
+      classNames: "relative grow"
+    }),
+    onClick: handleClick,
+    ref: setRef
+  }, /* @__PURE__ */ React3.createElement("div", {
     ref: rootRef,
     className: "absolute inset-0"
   }));
+});
+var assignRef = (ref, value) => {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
 };
 
+// src/components/Graph/ForceGraph.tsx
+import { Atom, useAtomValue } from "@effect-atom/atom-react";
+import React4, { useCallback as useCallback2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
+import { Obj } from "@dxos/echo";
+import { SelectionModel } from "@dxos/graph";
+import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
+import { composable as composable2, composableProps as composableProps2, getHashStyles } from "@dxos/ui-theme";
+import "@dxos/react-ui-graph/styles/graph.css";
+var EMPTY_ATOM = Atom.make({
+  nodes: [],
+  edges: []
+});
+var ForceGraph = composable2(({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {
+  useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
+  const graph = useRef2(null);
+  const selection = useMemo(() => selectionProp ?? new SelectionModel(), [
+    selectionProp
+  ]);
+  useEffect4(() => {
+    const unsubscribe = selection.subscribe(() => graph.current?.repaint());
+    return unsubscribe;
+  }, [
+    selection
+  ]);
+  const svgRef = useRef2(null);
+  const [projector, setProjector] = useState2();
+  useEffect4(() => {
+    if (svgRef.current) {
+      setProjector(new GraphForceProjector(svgRef.current, {
+        attributes: {
+          // TODO(burdon): Check type (currently assumes Employee property).
+          // Edge shouldn't contribute to force if it's not active.
+          linkForce: (edge) => edge.data?.object?.active !== false
+        },
+        forces: {
+          point: {
+            strength: 0.01
+          }
+        }
+      }));
+    }
+  }, []);
+  const handleSelect = useCallback2((node) => {
+    if (selection.contains(node.id)) {
+      selection.remove(node.id);
+    } else {
+      selection.add(node.id);
+    }
+  }, [
+    selection
+  ]);
+  return /* @__PURE__ */ React4.createElement("div", {
+    ...composableProps2(props, {
+      classNames: "dx-container"
+    }),
+    ref: forwardedRef
+  }, /* @__PURE__ */ React4.createElement(SVG.Root, {
+    ref: svgRef
+  }, /* @__PURE__ */ React4.createElement(SVG.Markers, null), grid && /* @__PURE__ */ React4.createElement(SVG.Grid, {
+    axis: true
+  }), /* @__PURE__ */ React4.createElement(SVG.Zoom, {
+    extent: [
+      1 / 2,
+      2
+    ]
+  }, /* @__PURE__ */ React4.createElement(SVG.Graph, {
+    drag,
+    ref: graph,
+    model,
+    projector,
+    labels: {
+      text: (node) => 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,
+    onInspect
+  }))));
+});
+
 // src/components/Tree/Tree.tsx
 import { RegistryContext } from "@effect-atom/atom-react";
-import React5, { useContext, useEffect as useEffect5, useRef as useRef3, useState as useState2 } from "react";
+import React5, { useContext, useEffect as useEffect5, useRef as useRef3, useState as useState3 } from "react";
 import { useAsyncState } from "@dxos/react-ui";
 import { SVG as SVG2 } from "@dxos/react-ui-graph";
 import { SpaceGraphModel } from "@dxos/schema";
@@ -11203,7 +11220,7 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
     selected,
     registry
   ]);
-  const [tree3, setTree] = useState2();
+  const [tree3, setTree] = useState3();
   useEffect5(() => {
     return model?.subscribe(() => {
       const tree4 = mapGraphToTreeData(model);
@@ -11246,129 +11263,12 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
     ref: context
   }));
 };
-
-// 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;
-};
-
-// src/ExplorerPlugin.tsx
-import * as Effect from "effect/Effect";
-import * as Option from "effect/Option";
-import { Plugin } from "@dxos/app-framework";
-import { AppPlugin } from "@dxos/app-toolkit";
-import { Annotation, Type as Type3 } from "@dxos/echo";
-import { Operation } from "@dxos/operation";
-import { SpaceOperation } from "@dxos/plugin-space/operations";
-import { ViewModel } from "@dxos/schema";
-import { ReactSurface } from "#capabilities";
-import { meta as meta3 } from "#meta";
-import { ExplorerAction, Graph as Graph2 } from "#types";
-
-// src/translations.ts
-import { Type as Type2 } from "@dxos/echo";
-import { translations as componentsTranslations } from "@dxos/react-ui-components";
-import { meta as meta2 } from "#meta";
-import { Graph } from "#types";
-var translations = [
-  {
-    "en-US": {
-      [Type2.getTypename(Graph.Graph)]: {
-        "typename.label": "Explorer",
-        "typename.label_zero": "Explorers",
-        "typename.label_one": "Explorer",
-        "typename.label_other": "Explorers",
-        "object-name.placeholder": "New explorer",
-        "add-object.label": "Add explorer",
-        "rename-object.label": "Rename explorer",
-        "delete-object.label": "Delete explorer",
-        "object-deleted.label": "Explorer deleted"
-      },
-      [meta2.id]: {
-        "plugin.name": "Explorer",
-        "object-title.label": "Title"
-      }
-    }
-  },
-  ...componentsTranslations
-];
-
-// src/ExplorerPlugin.tsx
-var ExplorerPlugin = Plugin.define(meta3).pipe(AppPlugin.addMetadataModule({
-  metadata: {
-    id: Type3.getTypename(Graph2.Graph),
-    metadata: {
-      icon: Annotation.IconAnnotation.get(Graph2.Graph).pipe(Option.getOrThrow).icon,
-      iconHue: Annotation.IconAnnotation.get(Graph2.Graph).pipe(Option.getOrThrow).hue ?? "white",
-      inputSchema: ExplorerAction.GraphProps,
-      createObject: (props, options) => Effect.gen(function* () {
-        const object = yield* Effect.promise(async () => {
-          const { view } = await ViewModel.makeFromDatabase({
-            db: options.db,
-            typename: props.typename
-          });
-          return Graph2.make({
-            name: props.name,
-            view
-          });
-        });
-        return yield* Operation.invoke(SpaceOperation.AddObject, {
-          object,
-          target: options.target,
-          hidden: true,
-          targetNodeId: options.targetNodeId
-        });
-      })
-    }
-  }
-}), AppPlugin.addSchemaModule({
-  schema: [
-    Graph2.Graph
-  ]
-}), AppPlugin.addSurfaceModule({
-  activate: ReactSurface
-}), AppPlugin.addTranslationsModule({
-  translations
-}), Plugin.make);
 export {
+  CanvasForceGraph,
   Chart,
-  D3ForceGraph,
-  ExplorerPlugin,
   ForceGraph,
   Globe,
   Tree,
-  defaultTreeLayoutSlots,
-  meta,
-  useGraphModel
+  defaultTreeLayoutSlots
 };
 //# sourceMappingURL=index.mjs.map