@dxos/plugin-explorer 0.8.4-main.28f8d3d → 0.8.4-main.406dc2a

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ExplorerContainer.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useMemo, useState } from 'react';\n\nimport { type Filter } from '@dxos/echo';\nimport { QueryBuilder } from '@dxos/echo-query';\nimport { useGlobalSearch } from '@dxos/plugin-search';\nimport { getSpace } from '@dxos/react-client/echo';\nimport { Toolbar } from '@dxos/react-ui';\nimport { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';\nimport { StackItem } from '@dxos/react-ui-stack';\nimport { type DataType } from '@dxos/schema';\n\nimport { useGraphModel } from '../hooks';\n\nimport { D3ForceGraph } from './Graph';\n\ntype ExplorerContainerProps = {\n  role: string;\n  view: DataType.View;\n};\n\nconst ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {\n  const space = 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));\n  }, []);\n\n  const showToolbar = role === 'article';\n\n  if (!space || !model) {\n    return null;\n  }\n\n  return (\n    <StackItem.Content toolbar={showToolbar}>\n      {showToolbar && (\n        <Toolbar.Root>\n          <QueryEditor db={space.db} onChange={handleChange} />\n        </Toolbar.Root>\n      )}\n      <D3ForceGraph model={model} match={match} />\n    </StackItem.Content>\n  );\n};\n\nexport default ExplorerContainer;\n"],
+  "mappings": ";;;;;;;;;;;AAIA,OAAOA,SAASC,aAAaC,SAASC,gBAAgB;AAGtD,SAASC,oBAAoB;AAC7B,SAASC,uBAAuB;AAChC,SAASC,gBAAgB;AACzB,SAASC,eAAe;AACxB,SAASC,mBAA0C;AACnD,SAASC,iBAAiB;AAY1B,IAAMC,oBAAoB,CAAC,EAAEC,MAAMC,KAAI,MAA0B;;;AAC/D,UAAMC,QAAQC,SAASF,IAAAA;AACvB,UAAM,CAACG,QAAQC,SAAAA,IAAaC,SAAAA;AAC5B,UAAMC,QAAQC,cAAcN,OAAOE,MAAAA;AACnC,UAAM,EAAEK,MAAK,IAAKC,gBAAAA;AAElB,UAAMC,UAAUC,QAAQ,MAAM,IAAIC,aAAAA,GAAgB,CAAA,CAAE;AACpD,UAAMC,eAAeC,YAAuD,CAACC,UAAAA;AAC3EX,gBAAUM,QAAQM,MAAMD,KAAAA,CAAAA;IAC1B,GAAG,CAAA,CAAE;AAEL,UAAME,cAAclB,SAAS;AAE7B,QAAI,CAACE,SAAS,CAACK,OAAO;AACpB,aAAO;IACT;AAEA,WACE,sBAAA,cAACY,UAAUC,SAAO;MAACC,SAASH;OACzBA,eACC,sBAAA,cAACI,QAAQC,MAAI,MACX,sBAAA,cAACC,aAAAA;MAAYC,IAAIvB,MAAMuB;MAAIC,UAAUZ;SAGzC,sBAAA,cAACa,cAAAA;MAAapB;MAAcE;;;;;AAGlC;AAEA,IAAA,4BAAeV;",
+  "names": ["React", "useCallback", "useMemo", "useState", "QueryBuilder", "useGlobalSearch", "getSpace", "Toolbar", "QueryEditor", "StackItem", "ExplorerContainer", "role", "view", "space", "getSpace", "filter", "setFilter", "useState", "model", "useGraphModel", "match", "useGlobalSearch", "builder", "useMemo", "QueryBuilder", "handleChange", "useCallback", "value", "build", "showToolbar", "StackItem", "Content", "toolbar", "Toolbar", "Root", "QueryEditor", "db", "onChange", "D3ForceGraph"]
+}

package/dist/lib/node-esm/{chunk-MCOXQ3ML.mjs → chunk-6JACZE7E.mjs}

@@ -6,7 +6,7 @@ import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import { Obj } from "@dxos/echo";
 import { SelectionModel } from "@dxos/graph";
 import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
-import { getHashColor } from "@dxos/react-ui-theme";
+import { getHashStyles } from "@dxos/react-ui-theme";
 import "@dxos/react-ui-graph/styles/graph.css";
 var D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }) => {
   var _effect = _useSignals();
@@ -71,7 +71,7 @@ var D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }
           const obj = node.data?.data.object;
           return {
             data: {
-              color: getHashColor(obj && Obj.getTypename(obj))?.color
+              color: getHashStyles(obj && Obj.getTypename(obj))?.hue
             },
             classes: {
               "dx-selected": selection.contains(node.id)
@@ -95,11 +95,30 @@ import { useResizeDetector } from "react-resize-detector";
 import { filterObjectsSync } from "@dxos/plugin-search";
 
 // src/components/Graph/adapter.ts
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 var GraphAdapter = class {
-  graph;
-  _nodes;
-  _links;
+  get nodes() {
+    return this._nodes;
+  }
+  get links() {
+    return this._links;
+  }
   constructor(graph) {
+    _define_property(this, "graph", void 0);
+    _define_property(this, "_nodes", void 0);
+    _define_property(this, "_links", void 0);
     this.graph = graph;
     this._nodes = [];
     this._links = [];
@@ -115,12 +134,6 @@ var GraphAdapter = class {
       data: edge.data
     }));
   }
-  get nodes() {
-    return this._nodes;
-  }
-  get links() {
-    return this._links;
-  }
 };
 
 // src/components/Graph/ForceGraph.tsx
@@ -131,8 +144,8 @@ var ForceGraph = ({ model, match }) => {
       refreshRate: 200
     });
     const rootRef = useRef2(null);
-    const forceGraph = useRef2();
-    const filteredRef = useRef2();
+    const forceGraph = useRef2(null);
+    const filteredRef = useRef2([]);
     filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
     const [data, setData] = useState();
     useEffect2(() => {
@@ -151,7 +164,7 @@ var ForceGraph = ({ model, match }) => {
           nodes: [],
           links: []
         });
-        forceGraph.current = void 0;
+        forceGraph.current = null;
       };
     }, []);
     useEffect2(() => {
@@ -189,4 +202,4 @@ export {
   D3ForceGraph,
   ForceGraph
 };
-//# sourceMappingURL=chunk-MCOXQ3ML.mjs.map
+//# sourceMappingURL=chunk-6JACZE7E.mjs.map

package/dist/lib/node-esm/chunk-6JACZE7E.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/Graph/D3ForceGraph.tsx", "../../../src/components/Graph/ForceGraph.tsx", "../../../src/components/Graph/adapter.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport { Obj } from '@dxos/echo';\nimport { SelectionModel } from '@dxos/graph';\nimport { type ThemedClassName } from '@dxos/react-ui';\nimport {\n  type GraphController,\n  GraphForceProjector,\n  type GraphLayoutNode,\n  type GraphProps,\n  SVG,\n  type SVGContext,\n} from '@dxos/react-ui-graph';\nimport { getHashStyles } from '@dxos/react-ui-theme';\nimport { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';\n\nimport '@dxos/react-ui-graph/styles/graph.css';\n\nexport type D3ForceGraphProps = ThemedClassName<\n  {\n    model?: SpaceGraphModel;\n    match?: RegExp;\n    selection?: SelectionModel;\n    grid?: boolean;\n  } & Pick<GraphProps, 'drag'>\n>;\n\nexport const D3ForceGraph = ({ classNames, model, selection: _selection, grid, ...props }: D3ForceGraphProps) => {\n  const context = useRef<SVGContext>(null);\n  const projector = useMemo<GraphForceProjector | undefined>(() => {\n    if (context.current) {\n      return new GraphForceProjector(context.current, {\n        attributes: {\n          linkForce: (edge) => {\n            // TODO(burdon): Check type (currently assumes Employee property).\n            // Edge shouldn't contribute to force if it's not active.\n            return edge.data?.object?.active !== false;\n          },\n        },\n        forces: {\n          point: {\n            strength: 0.01,\n          },\n        },\n      });\n    }\n  }, [context.current]);\n\n  const graph = useRef<GraphController>(null);\n  const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);\n  useEffect(() => graph.current?.repaint(), [selection.selected.value]);\n\n  const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(\n    (node) => {\n      if (selection.contains(node.id)) {\n        selection.remove(node.id);\n      } else {\n        selection.add(node.id);\n      }\n    },\n    [selection],\n  );\n\n  return (\n    <SVG.Root ref={context} classNames={classNames}>\n      <SVG.Markers />\n      {grid && <SVG.Grid axis />}\n      <SVG.Zoom extent={[1 / 2, 2]}>\n        <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>\n          {...props}\n          ref={graph}\n          model={model}\n          projector={projector}\n          labels={{\n            text: (node) => {\n              return node.data?.data.label ?? node.id;\n            },\n          }}\n          attributes={{\n            node: (node: GraphLayoutNode<SpaceGraphNode>) => {\n              const obj = node.data?.data.object;\n              return {\n                data: {\n                  color: getHashStyles(obj && Obj.getTypename(obj))?.hue,\n                },\n                classes: {\n                  'dx-selected': selection.contains(node.id),\n                },\n              };\n            },\n          }}\n          onSelect={handleSelect}\n        />\n      </SVG.Zoom>\n    </SVG.Root>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { forceLink, forceManyBody } from 'd3';\nimport NativeForceGraph from 'force-graph';\nimport React, { type FC, useEffect, useRef, useState } from 'react';\nimport { useResizeDetector } from 'react-resize-detector';\n\nimport { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';\nimport { type SpaceGraphModel } from '@dxos/schema';\n\nimport { GraphAdapter } from './adapter';\n\nexport type ForceGraphProps = {\n  model?: SpaceGraphModel;\n  match?: RegExp;\n};\n\nexport const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {\n  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });\n  const rootRef = useRef<HTMLDivElement>(null);\n  const forceGraph = useRef<NativeForceGraph>(null);\n\n  const filteredRef = useRef<SearchResult[]>([]);\n  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);\n\n  const [data, setData] = useState<GraphAdapter>();\n  useEffect(() => {\n    return model?.subscribe((model) => {\n      setData(new GraphAdapter(model.graph));\n    });\n  }, [model]);\n\n  useEffect(() => {\n    if (rootRef.current) {\n      // https://github.com/vasturiano/force-graph\n      // https://github.com/vasturiano/3d-force-graph\n      forceGraph.current = new NativeForceGraph(rootRef.current)\n        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling\n        .nodeRelSize(6)\n        .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))\n        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))\n\n        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling\n        .linkAutoColorBy((link: any) => link.type);\n    }\n\n    return () => {\n      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });\n      forceGraph.current = null;\n    };\n  }, []);\n\n  useEffect(() => {\n    if (!data || !width || !height || !forceGraph.current) {\n      return;\n    }\n\n    // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout\n    forceGraph.current\n      .pauseAnimation()\n      .width(width)\n      .height(height)\n      .onEngineStop(() => {\n        handleZoomToFit();\n      })\n      .onNodeClick((node: any) => {\n        forceGraph.current?.emitParticle(node);\n      })\n\n      // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration\n      // .d3Force('center', forceCenter().strength(0.9))\n      .d3Force('link', forceLink().distance(160).strength(0.5))\n      .d3Force('charge', forceManyBody().strength(-30))\n\n      .graphData(data)\n      .warmupTicks(100)\n      .cooldownTime(1_000)\n      .resumeAnimation();\n  }, [data, width, height, forceGraph.current]);\n\n  const handleZoomToFit = () => {\n    forceGraph.current?.zoomToFit(400, 40);\n  };\n\n  return (\n    <div ref={ref} className='relative grow' onClick={handleZoomToFit}>\n      <div ref={rootRef} className='absolute inset-0' />\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Graph } from '@dxos/graph';\n\nexport type GraphNode = {\n  id?: string;\n};\n\nexport type GraphLink = {\n  source?: string;\n  target?: string;\n};\n\nexport type GraphData = {\n  nodes: GraphNode[];\n  links: GraphLink[];\n};\n\n/**\n * Map common graph to force-graph format.\n */\nexport class GraphAdapter implements GraphData {\n  private readonly _nodes: GraphNode[] = [];\n  private readonly _links: GraphLink[] = [];\n\n  constructor(private readonly graph: Graph) {\n    this._nodes = graph.nodes.map((node) => ({\n      id: node.id,\n      type: node.type,\n      data: node.data,\n    }));\n\n    this._links = graph.edges.map((edge) => ({\n      type: edge.type,\n      source: edge.source,\n      target: edge.target,\n      data: edge.data,\n    }));\n  }\n\n  get nodes() {\n    return this._nodes;\n  }\n\n  get links() {\n    return this._links;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["React", "useCallback", "useEffect", "useMemo", "useRef", "Obj", "SelectionModel", "GraphForceProjector", "SVG", "getHashStyles", "D3ForceGraph", "classNames", "model", "selection", "_selection", "grid", "props", "context", "useRef", "projector", "useMemo", "current", "GraphForceProjector", "attributes", "linkForce", "edge", "data", "object", "active", "forces", "point", "strength", "graph", "SelectionModel", "useEffect", "repaint", "selected", "value", "handleSelect", "useCallback", "node", "contains", "id", "remove", "add", "SVG", "Root", "ref", "Markers", "Grid", "axis", "Zoom", "extent", "Graph", "labels", "text", "label", "obj", "color", "getHashStyles", "Obj", "getTypename", "hue", "classes", "onSelect", "forceLink", "forceManyBody", "NativeForceGraph", "React", "useEffect", "useRef", "useState", "useResizeDetector", "filterObjectsSync", "GraphAdapter", "nodes", "_nodes", "links", "_links", "graph", "map", "node", "id", "type", "data", "edges", "edge", "source", "target", "ForceGraph", "model", "match", "ref", "width", "height", "useResizeDetector", "refreshRate", "rootRef", "useRef", "forceGraph", "filteredRef", "current", "filterObjectsSync", "objects", "data", "setData", "useState", "useEffect", "subscribe", "GraphAdapter", "graph", "NativeForceGraph", "nodeRelSize", "nodeLabel", "node", "type", "typename", "label", "id", "nodeAutoColorBy", "linkAutoColorBy", "link", "pauseAnimation", "graphData", "nodes", "links", "onEngineStop", "handleZoomToFit", "onNodeClick", "emitParticle", "d3Force", "forceLink", "distance", "strength", "forceManyBody", "warmupTicks", "cooldownTime", "resumeAnimation", "zoomToFit", "React", "div", "className", "onClick"]
+}

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

@@ -0,0 +1,80 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+import {
+  meta
+} from "./chunk-PX6LHR2N.mjs";
+import {
+  __export
+} from "./chunk-HSLMI22Q.mjs";
+
+// src/types/ExplorerAction.ts
+var ExplorerAction_exports = {};
+__export(ExplorerAction_exports, {
+  CreateGraph: () => CreateGraph,
+  GraphProps: () => GraphProps
+});
+import * as Schema from "effect/Schema";
+import { SpaceSchema } from "@dxos/react-client/echo";
+import { DataType, TypenameAnnotationId } from "@dxos/schema";
+var EXPLORER_ACTION = `${meta.id}/action`;
+var GraphProps = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  typename: Schema.String.annotations({
+    [TypenameAnnotationId]: [
+      "used-static",
+      "dynamic"
+    ],
+    title: "Select graph record type"
+  })
+});
+var CreateGraph = class extends Schema.TaggedClass()(`${EXPLORER_ACTION}/create-graph`, {
+  input: Schema.Struct({
+    space: SpaceSchema
+  }).pipe(Schema.extend(GraphProps)),
+  output: Schema.Struct({
+    object: DataType.View
+  })
+}) {
+};
+
+// src/types/Graph.ts
+var Graph_exports = {};
+__export(Graph_exports, {
+  Graph: () => Graph,
+  make: () => make,
+  makeView: () => makeView
+});
+import * as Schema2 from "effect/Schema";
+import { Filter, Obj, Query, QueryAST, Type } from "@dxos/echo";
+import { LabelAnnotation, ViewAnnotation } from "@dxos/echo/internal";
+import { createViewFromSpace } from "@dxos/schema";
+var Graph = Schema2.Struct({
+  name: Schema2.optional(Schema2.String),
+  query: Schema2.Struct({
+    raw: Schema2.optional(Schema2.String),
+    ast: QueryAST.Query
+  }).pipe(Schema2.mutable)
+}).pipe(Type.Obj({
+  typename: "dxos.org/type/Graph",
+  version: "0.1.0"
+}), LabelAnnotation.set([
+  "name"
+]), ViewAnnotation.set(true));
+var make = (props = {
+  query: {
+    raw: "",
+    ast: Query.select(Filter.nothing()).ast
+  }
+}) => Obj.make(Graph, props);
+var makeView = async ({ presentation, ...props }) => {
+  const graph = make(presentation);
+  return createViewFromSpace({
+    ...props,
+    presentation: graph
+  });
+};
+
+export {
+  ExplorerAction_exports,
+  Graph_exports
+};
+//# sourceMappingURL=chunk-ES6AOMCY.mjs.map

package/dist/lib/node-esm/chunk-ES6AOMCY.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 { SpaceSchema } from '@dxos/react-client/echo';\nimport { DataType, TypenameAnnotationId } from '@dxos/schema';\n\nimport { meta } from '../meta';\n\nconst EXPLORER_ACTION = `${meta.id}/action`;\n\nexport const GraphProps = Schema.Struct({\n  name: Schema.optional(Schema.String),\n  typename: Schema.String.annotations({\n    [TypenameAnnotationId]: ['used-static', 'dynamic'],\n    title: 'Select graph record type',\n  }),\n});\n\nexport class CreateGraph extends Schema.TaggedClass<CreateGraph>()(`${EXPLORER_ACTION}/create-graph`, {\n  input: Schema.Struct({\n    space: SpaceSchema,\n  }).pipe(Schema.extend(GraphProps)),\n  output: Schema.Struct({\n    object: DataType.View,\n  }),\n}) {}\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Filter, Obj, Query, QueryAST, Type } from '@dxos/echo';\nimport { LabelAnnotation, ViewAnnotation } from '@dxos/echo/internal';\nimport { type CreateViewFromSpaceProps, createViewFromSpace } from '@dxos/schema';\n\nexport const Graph = Schema.Struct({\n  name: Schema.optional(Schema.String),\n  query: Schema.Struct({\n    raw: Schema.optional(Schema.String),\n    ast: QueryAST.Query,\n  }).pipe(Schema.mutable),\n}).pipe(\n  Type.Obj({\n    typename: 'dxos.org/type/Graph',\n    version: '0.1.0',\n  }),\n  LabelAnnotation.set(['name']),\n  ViewAnnotation.set(true),\n);\n\nexport type Graph = Schema.Schema.Type<typeof Graph>;\n\n/**\n * Make a graph object.\n */\nexport const make = (\n  props: Obj.MakeProps<typeof Graph> = { query: { raw: '', ast: Query.select(Filter.nothing()).ast } },\n) => Obj.make(Graph, props);\n\ntype MakeViewProps = Omit<CreateViewFromSpaceProps, 'presentation'> & {\n  presentation?: Omit<Obj.MakeProps<typeof Graph>, 'name'>;\n};\n\n/**\n * Make a graph as a view of a data set.\n */\nexport const makeView = async ({ presentation, ...props }: MakeViewProps) => {\n  const graph = make(presentation);\n  return createViewFromSpace({ ...props, presentation: graph });\n};\n"],
+  "mappings": ";;;;;;;;;AAAA;;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,mBAAmB;AAC5B,SAASC,UAAUC,4BAA4B;AAI/C,IAAMC,kBAAkB,GAAGC,KAAKC,EAAE;AAE3B,IAAMC,aAAoBC,cAAO;EACtCC,MAAaC,gBAAgBC,aAAM;EACnCC,UAAiBD,cAAOE,YAAY;IAClC,CAACC,oBAAAA,GAAuB;MAAC;MAAe;;IACxCC,OAAO;EACT,CAAA;AACF,CAAA;AAEO,IAAMC,cAAN,cAAiCC,mBAAW,EAAgB,GAAGb,eAAAA,iBAAgC;EACpGc,OAAcV,cAAO;IACnBW,OAAOC;EACT,CAAA,EAAGC,KAAYC,cAAOf,UAAAA,CAAAA;EACtBgB,QAAef,cAAO;IACpBgB,QAAQC,SAASC;EACnB,CAAA;AACF,CAAA,EAAA;AAAI;;;AC5BJ;;;;;;AAIA,YAAYC,aAAY;AAExB,SAASC,QAAQC,KAAKC,OAAOC,UAAUC,YAAY;AACnD,SAASC,iBAAiBC,sBAAsB;AAChD,SAAwCC,2BAA2B;AAE5D,IAAMC,QAAeC,eAAO;EACjCC,MAAaC,iBAAgBC,cAAM;EACnCC,OAAcJ,eAAO;IACnBK,KAAYH,iBAAgBC,cAAM;IAClCG,KAAKC,SAASC;EAChB,CAAA,EAAGC,KAAYC,eAAO;AACxB,CAAA,EAAGD,KACDE,KAAKC,IAAI;EACPC,UAAU;EACVC,SAAS;AACX,CAAA,GACAC,gBAAgBC,IAAI;EAAC;CAAO,GAC5BC,eAAeD,IAAI,IAAA,CAAA;AAQd,IAAME,OAAO,CAClBC,QAAqC;EAAEf,OAAO;IAAEC,KAAK;IAAIC,KAAKE,MAAMY,OAAOC,OAAOC,QAAO,CAAA,EAAIhB;EAAI;AAAE,MAChGM,IAAIM,KAAKnB,OAAOoB,KAAAA;AASd,IAAMI,WAAW,OAAO,EAAEC,cAAc,GAAGL,MAAAA,MAAsB;AACtE,QAAMM,QAAQP,KAAKM,YAAAA;AACnB,SAAOE,oBAAoB;IAAE,GAAGP;IAAOK,cAAcC;EAAM,CAAA;AAC7D;",
+  "names": ["Schema", "SpaceSchema", "DataType", "TypenameAnnotationId", "EXPLORER_ACTION", "meta", "id", "GraphProps", "Struct", "name", "optional", "String", "typename", "annotations", "TypenameAnnotationId", "title", "CreateGraph", "TaggedClass", "input", "space", "SpaceSchema", "pipe", "extend", "output", "object", "DataType", "View", "Schema", "Filter", "Obj", "Query", "QueryAST", "Type", "LabelAnnotation", "ViewAnnotation", "createViewFromSpace", "Graph", "Struct", "name", "optional", "String", "query", "raw", "ast", "QueryAST", "Query", "pipe", "mutable", "Type", "Obj", "typename", "version", "LabelAnnotation", "set", "ViewAnnotation", "make", "props", "select", "Filter", "nothing", "makeView", "presentation", "graph", "createViewFromSpace"]
+}

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

@@ -0,0 +1,11 @@
+import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-HSLMI22Q.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/lib/node-esm/{chunk-PIAXA43R.mjs → chunk-PX6LHR2N.mjs}

@@ -1,9 +1,8 @@
 import { createRequire } from 'node:module';const require = createRequire(import.meta.url);
 
 // src/meta.ts
-var EXPLORER_PLUGIN = "dxos.org/plugin/explorer";
 var meta = {
-  id: EXPLORER_PLUGIN,
+  id: "dxos.org/plugin/explorer",
   name: "Explorer",
   description: "Install this plugin to view a hypergraph of all objects inside of your Space.",
   icon: "ph--graph--regular",
@@ -17,7 +16,6 @@ var meta = {
 };
 
 export {
-  EXPLORER_PLUGIN,
   meta
 };
-//# sourceMappingURL=chunk-PIAXA43R.mjs.map
+//# sourceMappingURL=chunk-PX6LHR2N.mjs.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/meta.ts"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const meta: PluginMeta = {\n  id: 'dxos.org/plugin/explorer',\n  name: 'Explorer',\n  description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',\n  icon: 'ph--graph--regular',\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": ";;;AAMO,IAAMA,OAAmB;EAC9BC,IAAI;EACJC,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
+  "names": ["meta", "id", "name", "description", "icon", "source", "tags", "screenshots"]
+}

package/dist/lib/node-esm/{chunk-W4ZNCGOD.mjs → chunk-ZCV4U7LT.mjs}

@@ -10975,9 +10975,23 @@ var TidyTree = (s, data, options) => {
 var TidyTree_default = TidyTree;
 
 // src/components/Tree/types/tree.ts
-import { Schema } from "effect";
+import * as Schema from "effect/Schema";
 import { Key, Obj, Type } from "@dxos/echo";
 import { invariant } from "@dxos/invariant";
+function _define_property(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts";
 var TreeNodeType = Schema.Struct({
   id: Key.ObjectId,
   children: Schema.mutable(Schema.Array(Key.ObjectId)),
@@ -10997,6 +11011,244 @@ var TreeType = Schema.Struct({
   typename: "dxos.org/type/Tree",
   version: "0.1.0"
 }));
+var Tree = class _Tree {
+  get tree() {
+    return this._tree;
+  }
+  // TODO(burdon): Make reactive.
+  get size() {
+    return Object.keys(this._tree.nodes).length;
+  }
+  get root() {
+    return this.getNode(this._tree.root);
+  }
+  //
+  // Traversal
+  //
+  /**
+  * Recursively traverse the tree until the callback returns a value.
+  */
+  tranverse(callback, root = this._tree.root, depth = 0) {
+    const node = this._tree.nodes[root];
+    const result = callback(node, depth);
+    if (result !== void 0) {
+      return result;
+    }
+    for (const childId of node.children) {
+      const result2 = this.tranverse(callback, childId, depth + 1);
+      if (result2 !== void 0) {
+        return result2;
+      }
+    }
+  }
+  getNode(id) {
+    const node = this._tree.nodes[id];
+    invariant(node, void 0, {
+      F: __dxlog_file,
+      L: 98,
+      S: this,
+      A: [
+        "node",
+        ""
+      ]
+    });
+    return node;
+  }
+  /**
+  * Get the children of a node.
+  */
+  getChildNodes(node) {
+    return node.children.map((id) => this.getNode(id));
+  }
+  /**
+  * Get the parent of a node.
+  */
+  getParent(node) {
+    const parent = this.tranverse((n) => {
+      if (n.children.includes(node.id)) {
+        return n;
+      }
+    });
+    return parent ?? null;
+  }
+  /**
+  * Get the next node in the tree.
+  */
+  getNext(node, hierarchical = true) {
+    if (hierarchical && node.children.length) {
+      return this.getChildNodes(node)[0];
+    } else {
+      const parent = this.getParent(node);
+      if (parent) {
+        const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
+        if (idx < parent.children.length - 1) {
+          return this.getNode(parent.children[idx + 1]);
+        } else {
+          return this.getNext(parent, false);
+        }
+      }
+    }
+  }
+  /**
+  * Get the previous node in the tree.
+  */
+  getPrevious(node, hierarchical = true) {
+    const parent = this.getParent(node);
+    const idx = this.getChildNodes(parent).findIndex(({ id }) => id === node.id);
+    if (idx === 0) {
+      if (hierarchical) {
+        return parent;
+      }
+    } else {
+      const previous = this.getNode(parent.children[idx - 1]);
+      if (hierarchical && previous.children.length) {
+        return this.getLastDescendent(previous);
+      }
+      return previous;
+    }
+  }
+  /**
+  * Get the last descendent of a node.
+  */
+  getLastDescendent(node) {
+    const children = this.getChildNodes(node);
+    const last = children.length ? children[children.length - 1] : void 0;
+    if (last) {
+      return this.getLastDescendent(last);
+    }
+    return node;
+  }
+  //
+  // Mutations
+  //
+  /**
+  * Clear tree.
+  */
+  clear() {
+    const root = this._tree.nodes[this._tree.root];
+    root.children.length = 0;
+    this._tree.nodes = {
+      [root.id]: root
+    };
+  }
+  /**
+  * Add node.
+  */
+  addNode(parent, node, index) {
+    if (!node) {
+      const id = Key.ObjectId.random();
+      node = {
+        id,
+        children: [],
+        data: {
+          text: ""
+        }
+      };
+    }
+    this._tree.nodes[node.id] = node;
+    parent.children.splice(index ?? parent.children.length, 0, node.id);
+    return node;
+  }
+  /**
+  * Delete node.
+  */
+  deleteNode(parent, id) {
+    const node = this._tree.nodes[id];
+    if (!node) {
+      return void 0;
+    }
+    delete this._tree.nodes[node.id];
+    const idx = parent.children.findIndex((child) => child === id);
+    if (idx !== -1) {
+      parent.children.splice(idx, 1);
+    }
+    return node;
+  }
+  /**
+  * Move child node.
+  */
+  moveNode(node, from, to) {
+    invariant(from >= 0 && from < node.children.length, void 0, {
+      F: __dxlog_file,
+      L: 228,
+      S: this,
+      A: [
+        "from >= 0 && from < node.children.length",
+        ""
+      ]
+    });
+    invariant(to >= 0 && to < node.children.length, void 0, {
+      F: __dxlog_file,
+      L: 229,
+      S: this,
+      A: [
+        "to >= 0 && to < node.children.length",
+        ""
+      ]
+    });
+    if (from === to) {
+      return null;
+    }
+    const child = node.children[from];
+    node.children.splice(from, 1);
+    node.children.splice(to, 0, child);
+    return this.getNode(child);
+  }
+  /**
+  * Indent node.
+  */
+  indentNode(node) {
+    const parent = this.getParent(node);
+    if (!parent) {
+      return;
+    }
+    const idx = parent.children.findIndex((child) => child === node.id);
+    if (idx < 1 || idx >= parent.children.length) {
+      return;
+    }
+    const previous = this.getNode(parent.children[idx - 1]);
+    parent.children.splice(idx, 1);
+    previous.children.push(node.id);
+  }
+  /**
+  * Unindent node.
+  */
+  unindentNode(node) {
+    const parent = this.getParent(node);
+    if (!parent) {
+      return;
+    }
+    const ancestor = this.getParent(parent);
+    if (!ancestor) {
+      return;
+    }
+    const nodeIdx = parent.children.findIndex((id) => id === node.id);
+    const [_, ...rest] = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+    parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+    const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
+    ancestor.children.splice(parentIdx + 1, 0, node.id);
+    node.children.push(...rest);
+  }
+  constructor(tree3) {
+    _define_property(this, "_tree", void 0);
+    this._tree = tree3 ?? _Tree.create();
+  }
+};
+_define_property(Tree, "create", () => {
+  const id = Key.ObjectId.random();
+  return Obj.make(TreeType, {
+    root: id,
+    nodes: {
+      [id]: {
+        id,
+        children: [],
+        data: {
+          text: ""
+        }
+      }
+    }
+  });
+});
 
 // src/components/Tree/types/types.ts
 var mapGraphToTreeData = (model, maxDepth = 8) => {
@@ -11024,7 +11276,7 @@ var renderers = /* @__PURE__ */ new Map([
     HierarchicalEdgeBundling_default
   ]
 ]);
-var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
+var Tree2 = ({ space, selected, variant = "tidy", onNodeClick }) => {
   var _effect = _useSignals3();
   try {
     const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space) : void 0, [
@@ -11042,7 +11294,7 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
     ]);
     const context = useRef(null);
     useEffect3(() => {
-      if (context.current) {
+      if (context.current?.size) {
         const { width, height } = context.current.size;
         const size = Math.min(width, height);
         const radius = size * 0.4;
@@ -11079,13 +11331,13 @@ var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
 
 // src/components/index.ts
 import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-AMYAVLO4.mjs"));
+var ExplorerContainer = lazy(() => import("./ExplorerContainer-FRTDXZI5.mjs"));
 
 export {
   Chart,
   Globe,
   defaultTreeLayoutSlots,
-  Tree,
+  Tree2 as Tree,
   ExplorerContainer
 };
-//# sourceMappingURL=chunk-W4ZNCGOD.mjs.map
+//# sourceMappingURL=chunk-ZCV4U7LT.mjs.map