@dxos/plugin-explorer 0.8.2-staging.7ac8446 → 0.8.2

package/dist/lib/browser/{chunk-B2DMPSP5.mjs → chunk-73GQ46YO.mjs}

@@ -1,8 +1,5 @@
-import {
-  SpaceGraphModel
-} from "./chunk-SBLNE7FL.mjs";
-
 // packages/plugins/plugin-explorer/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";
@@ -20,43 +17,49 @@ var defaultOptions = {
   fillOpacity: 0.2
 };
 var Chart = ({ items = [], accessor, options = defaultOptions }) => {
-  const { ref: containerRef, width = 0, height = 0 } = useResizeDetector({
-    refreshRate: 200
-  });
-  useEffect(() => {
-    if (!width || !height) {
-      return;
-    }
-    const plot3 = Plot.plot({
-      grid: true,
+  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,
       width,
-      height,
-      style: {
-        background: "transparent"
-      },
-      marks: [
-        Plot.frame(),
-        Plot.dot(items, {
-          x: createAdapter("x", accessor),
-          y: createAdapter("y", accessor),
-          ...options
-        })
-      ]
+      height
+    ]);
+    return /* @__PURE__ */ React.createElement("div", {
+      ref: containerRef,
+      className: "grow"
     });
-    containerRef.current.append(plot3);
-    return () => plot3?.remove();
-  }, [
-    items,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ React.createElement("div", {
-    ref: containerRef,
-    className: "grow"
-  });
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-explorer/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";
@@ -10770,80 +10773,86 @@ var defaultOptions2 = {
   fill: "#003300"
 };
 var Globe = ({ items = [], accessor, projection = "orthographic", options = defaultOptions2 }) => {
-  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
+  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
+          })
         ]
-      },
-      // projection: { type: 'equirectangular', rotate: [-140, -30] },
+      });
+      containerRef.current.append(plot3);
+      return () => plot3?.remove();
+    }, [
+      items,
       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
-        })
-      ]
+      height
+    ]);
+    return /* @__PURE__ */ React2.createElement("div", {
+      ref: containerRef,
+      className: "grow p-4"
     });
-    containerRef.current.append(plot3);
-    return () => plot3?.remove();
-  }, [
-    items,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ React2.createElement("div", {
-    ref: containerRef,
-    className: "grow p-4"
-  });
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-explorer/src/components/Tree/Tree.tsx
-import React3, { useEffect as useEffect3, useState } from "react";
-import { useResizeDetector as useResizeDetector3 } from "react-resize-detector";
-import { createSvgContext, SVG, SVGRoot } from "@dxos/gem-core";
+import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
+import React3, { useEffect as useEffect3, useRef, useState } from "react";
 import { useAsyncState } from "@dxos/react-ui";
+import { SVG } from "@dxos/react-ui-graph";
+import { SpaceGraphModel } from "@dxos/schema";
 
 // packages/plugins/plugin-explorer/src/components/Tree/layout/HierarchicalEdgeBundling.ts
-import * as d3 from "d3";
+import { cluster, curveBundle, hierarchy, lineRadial, select } from "d3";
 var HierarchicalEdgeBundling = (s, data, options) => {
-  const svg = d3.select(s);
+  const svg = select(s);
   svg.selectAll("*").remove();
   const { radius = 600, padding = 100, slots } = options;
-  const root = d3.hierarchy(flatten(data));
-  const tree3 = d3.cluster().size([
+  const root = hierarchy(flatten(data));
+  const tree3 = 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", slots?.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 line = lineRadial().curve(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", slots?.path ?? "").attr("d", ([i, o]) => {
     return line(i.path(o));
   }).each(function(d) {
@@ -10894,21 +10903,21 @@ var flatten = (node) => {
 var HierarchicalEdgeBundling_default = HierarchicalEdgeBundling;
 
 // packages/plugins/plugin-explorer/src/components/Tree/layout/RadialTree.ts
-import * as d32 from "d3";
+import { hierarchy as hierarchy2, linkRadial, select as select2, tree } from "d3";
 var RadialTree = (s, data, options) => {
-  const svg = d32.select(s);
+  const svg = select2(s);
   svg.selectAll("*").remove();
   const { label, radius = 400, r = 4, slots } = options;
   const arc = 2 * Math.PI;
-  const root = d32.hierarchy(data);
+  const root = hierarchy2(data);
   const descendants = root.descendants();
   const getLabel = label === null ? null : descendants.map((d) => label(d.data));
-  const layout = d32.tree().size([
+  const layout = 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", slots?.path ?? "").attr("d", d32.linkRadial().angle((d) => d.x + Math.PI / 2).radius((d) => d.y));
+  svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots?.path ?? "").attr("d", 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", slots?.node ?? "").attr("r", r);
   if (getLabel) {
@@ -10919,17 +10928,17 @@ var RadialTree = (s, data, options) => {
 var RadialTree_default = RadialTree;
 
 // packages/plugins/plugin-explorer/src/components/Tree/layout/TidyTree.ts
-import * as d33 from "d3";
+import { curveBumpX, hierarchy as hierarchy3, link, select as select3, tree as tree2 } from "d3";
 var TidyTree = (s, data, options) => {
-  const svg = d33.select(s);
+  const svg = select3(s);
   svg.selectAll("*").remove();
   const { label, width, height, r = 4, padding = 4, margin = 60, slots } = options;
-  const root = d33.hierarchy(data);
+  const root = hierarchy3(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([
+  const layout = tree2().nodeSize([
     dx,
     dy
   ]);
@@ -10954,7 +10963,7 @@ var TidyTree = (s, data, options) => {
   });
   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", slots?.path ?? "").attr("d", d33.link(d33.curveBumpX).x((d) => d.y + oy).y((d) => d.x * sx));
+  svg.append("g").selectAll("path").data(root.links()).join("path").attr("class", slots?.path ?? "").attr("d", link(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", slots?.node ?? "").attr("r", r);
   if (getLabel) {
@@ -10963,26 +10972,275 @@ var TidyTree = (s, data, options) => {
 };
 var TidyTree_default = TidyTree;
 
-// packages/plugins/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)
+// packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts
+import { Schema } from "effect";
+import { Type } from "@dxos/echo";
+import { ObjectId, Ref, Expando } from "@dxos/echo-schema";
+import { invariant } from "@dxos/invariant";
+import { live } from "@dxos/live-object";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/plugins/plugin-explorer/src/components/Tree/types/tree.ts";
+var TreeNodeType = Schema.Struct({
+  id: ObjectId,
+  children: Schema.mutable(Schema.Array(ObjectId)),
+  data: Schema.mutable(Schema.Record({
+    key: Schema.String,
+    value: Schema.Any
+  })),
+  ref: Schema.optional(Ref(Expando))
+}).pipe(Schema.mutable);
+var TreeType = Schema.Struct({
+  root: ObjectId,
+  nodes: Schema.mutable(Schema.Record({
+    key: ObjectId,
+    value: TreeNodeType
+  }))
+}).pipe(Type.Obj({
+  typename: "dxos.org/type/Tree",
+  version: "0.1.0"
+}));
+var Tree = class _Tree {
+  static {
+    this.create = () => {
+      const id = ObjectId.random();
+      return live(TreeType, {
+        root: id,
+        nodes: {
+          [id]: {
+            id,
+            children: [],
+            data: {
+              text: ""
+            }
+          }
+        }
+      });
     };
-    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));
+  }
+  constructor(tree3) {
+    this._tree = tree3 ?? _Tree.create();
+  }
+  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;
     }
-    return treeNode;
-  };
-  let data;
-  if (model.selected) {
-    const node = model.graph.nodes.find((node2) => model.idAccessor(node2) === model.selected);
-    if (node) {
-      data = mapNode(node);
+    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: 100,
+      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 = 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: 230,
+      S: this,
+      A: [
+        "from >= 0 && from < node.children.length",
+        ""
+      ]
+    });
+    invariant(to >= 0 && to < node.children.length, void 0, {
+      F: __dxlog_file,
+      L: 231,
+      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);
+  }
+};
+
+// packages/plugins/plugin-explorer/src/components/Tree/types/types.ts
+var mapGraphToTreeData = (model, maxDepth = 8) => {
+  let data;
   return data;
 };
 
@@ -11006,66 +11264,68 @@ var renderers = /* @__PURE__ */ new Map([
     HierarchicalEdgeBundling_default
   ]
 ]);
-var Tree = ({ space, selected, variant = "tidy", onNodeClick }) => {
-  const [model] = useAsyncState(async () => space ? new SpaceGraphModel().open(space, selected) : void 0, [
-    space,
-    selected
-  ]);
-  const [tree3, setTree] = useState();
-  useEffect3(() => {
-    return model?.subscribe(() => {
-      const tree4 = mapGraphToTreeData(model);
-      setTree(tree4);
-    }, true);
-  }, [
-    model
-  ]);
-  const context = createSvgContext();
-  const { ref, width = 0, height = 0 } = useResizeDetector3();
-  useEffect3(() => {
-    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);
+var Tree2 = ({ 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) {
+        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);
+        }
       }
-    }
-  }, [
-    tree3,
-    width,
-    height
-  ]);
-  return /* @__PURE__ */ React3.createElement("div", {
-    ref,
-    className: "flex grow overflow-hidden",
-    onClick: () => onNodeClick?.()
-  }, /* @__PURE__ */ React3.createElement(SVGRoot, {
-    context
-  }, /* @__PURE__ */ React3.createElement(SVG, null)));
+    }, [
+      context.current,
+      tree3
+    ]);
+    return /* @__PURE__ */ React3.createElement("div", {
+      onClick: () => onNodeClick?.()
+    }, /* @__PURE__ */ React3.createElement(SVG.Root, {
+      ref: context
+    }));
+  } finally {
+    _effect.f();
+  }
 };
 
 // packages/plugins/plugin-explorer/src/components/index.ts
 import { lazy } from "react";
-var ExplorerContainer = lazy(() => import("./ExplorerContainer-HL532ODG.mjs"));
+var ExplorerContainer = lazy(() => import("./ExplorerContainer-BBZ54DJS.mjs"));
 
 export {
   Chart,
   Globe,
   defaultTreeLayoutSlots,
-  Tree,
+  Tree2 as Tree,
   ExplorerContainer
 };
-//# sourceMappingURL=chunk-B2DMPSP5.mjs.map
+//# sourceMappingURL=chunk-73GQ46YO.mjs.map