@dxos/plugin-explorer 0.6.8-main.046e6cf

package/LICENSE

@@ -0,0 +1,8 @@
+MIT License 
+Copyright (c) 2022 DXOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @dxos/plugin-explorer
+
+Surface plugin for data visualization.

package/dist/lib/browser/ExplorerArticle-IPAJQMAX.mjs

@@ -0,0 +1,27 @@
+import {
+  Graph
+} from "./chunk-7YEM64IQ.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-IPAJQMAX.mjs.map

package/dist/lib/browser/ExplorerArticle-IPAJQMAX.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/browser/ExplorerMain-3KFXOEYO.mjs

@@ -0,0 +1,33 @@
+import {
+  Graph
+} from "./chunk-7YEM64IQ.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-3KFXOEYO.mjs.map

package/dist/lib/browser/ExplorerMain-3KFXOEYO.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/browser/chunk-7YEM64IQ.mjs

@@ -0,0 +1,473 @@
+// 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, SVGContextProvider as SVGContextProvider2 } 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, darkGridStyles, defaultGridStyles, Grid, SVG, SVGContextProvider, Zoom } from "@dxos/gem-core";
+import { 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";
+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(SVGContextProvider, {
+    context
+  }, /* @__PURE__ */ React.createElement(SVG, {
+    className: slots?.root?.className
+  }, /* @__PURE__ */ React.createElement(Markers, {
+    arrowSize: 6
+  }), /* @__PURE__ */ React.createElement(Grid, {
+    className: slots?.grid?.className ?? themeMode === "dark" ? darkGridStyles : defaultGridStyles
+  }), /* @__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(SVGContextProvider2, {
+    context
+  }, /* @__PURE__ */ React2.createElement(SVG2, null)));
+};
+
+export {
+  SpaceGraphModel,
+  defaultTreeLayoutSlots,
+  Tree,
+  Graph
+};
+//# sourceMappingURL=chunk-7YEM64IQ.mjs.map