@dxos/plugin-explorer 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

package/src/components/Tree/layout/RadialTree.tsx

@@ -0,0 +1,237 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright 2024 Observable, Inc.
+//
+
+import { cluster as d3Cluster, linkRadial, select, tree as d3Tree } from 'd3';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { type TreeNode } from '../types';
+import { buildHierarchy, isCollapsed, isLeaf } from './hierarchy';
+import { type TreeLayoutSlots, defaultTreeLayoutSlots } from './slots';
+import { useContainerSize } from './useContainerSize';
+
+const TRANSITION_MS = 350;
+
+export type RadialTreeProps = ThemedClassName<{
+  data: TreeNode;
+  label?: (d: TreeNode) => string;
+  slots?: TreeLayoutSlots;
+  /** Node radius. */
+  r?: number;
+  /** Optional padding (in screen pixels) reserved around the radial layout. */
+  padding?: number;
+  /** Initial set of collapsed node ids. */
+  initialCollapsed?: Iterable<string>;
+  /**
+   * Use `d3.cluster` (all leaves equidistant from center) instead of `d3.tree`.
+   * Matches https://observablehq.com/@d3/radial-cluster.
+   */
+  cluster?: boolean;
+  /** Notified when the user clicks a node. */
+  onNodeClick?: (node: TreeNode) => void;
+  /**
+   * Notified on pointerenter (and `null` on pointerleave) for nodes. Used to wire previews
+   * (dispatch `DxAnchorActivate`). The event target on enter is the hovered circle — dispatch
+   * from it so the preview anchors there.
+   */
+  onNodeHover?: (node: TreeNode | null, event?: MouseEvent) => void;
+}>;
+
+/**
+ * Radial tree layout based on the D3 reference component.
+ * https://observablehq.com/@d3/radial-tree-component
+ *
+ * Click a node with children to toggle collapse / expand.
+ */
+export const RadialTree = ({
+  classNames,
+  data,
+  label = (d) => d.label ?? d.id,
+  slots = defaultTreeLayoutSlots,
+  r = 4,
+  padding = 80,
+  initialCollapsed,
+  cluster = false,
+  onNodeClick,
+  onNodeHover,
+}: RadialTreeProps) => {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const { setRef, width, height } = useContainerSize();
+
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set(initialCollapsed ?? []));
+  const toggle = useCallback((id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  const handleClickRef = useRef<(node: TreeNode) => void>(() => {});
+  handleClickRef.current = (node: TreeNode) => {
+    onNodeClick?.(node);
+    if (node.children?.length) {
+      toggle(node.id);
+    }
+  };
+
+  const handleHoverRef = useRef<(node: TreeNode | null, event?: MouseEvent) => void>(() => {});
+  handleHoverRef.current = (node: TreeNode | null, event?: MouseEvent) => onNodeHover?.(node, event);
+
+  const root = useMemo(() => buildHierarchy(data, collapsed), [data, collapsed]);
+
+  useEffect(() => {
+    if (!svgRef.current || !width || !height) {
+      return;
+    }
+
+    const radius = Math.max(0, Math.min(width, height) / 2 - padding);
+    renderRadialTree(svgRef.current, root, {
+      radius,
+      r,
+      label,
+      slots,
+      collapsed,
+      cluster,
+      onNodeClick: (n) => handleClickRef.current(n),
+      onNodeHover: (n, e) => handleHoverRef.current(n, e),
+    });
+  }, [root, width, height, r, padding, label, slots, collapsed, cluster]);
+
+  return (
+    <div ref={setRef} className={mx('dx-expander relative', classNames)}>
+      {width > 0 && height > 0 && (
+        <svg
+          ref={svgRef}
+          xmlns='http://www.w3.org/2000/svg'
+          width={width}
+          height={height}
+          viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
+        />
+      )}
+    </div>
+  );
+};
+
+type RenderOptions = {
+  radius: number;
+  r: number;
+  label: (d: TreeNode) => string;
+  slots: TreeLayoutSlots;
+  collapsed: Set<string>;
+  cluster: boolean;
+  onNodeClick: (node: TreeNode) => void;
+  onNodeHover: (node: TreeNode | null, event?: MouseEvent) => void;
+};
+
+const renderRadialTree = (svgElement: SVGSVGElement, root: any, options: RenderOptions) => {
+  const { radius, r, label, slots, collapsed, cluster, onNodeClick, onNodeHover } = options;
+  const svg = select(svgElement);
+
+  const layout = cluster ? d3Cluster<TreeNode>() : d3Tree<TreeNode>();
+  layout
+    .size([2 * Math.PI, radius])
+    .separation((a: any, b: any) => (a.parent === b.parent ? 1 : 2) / Math.max(1, a.depth))(root);
+
+  const g = svg.selectAll<SVGGElement, null>('g.dx-radial-root').data([null]).join('g').classed('dx-radial-root', true);
+
+  const linksLayer = g
+    .selectAll<SVGGElement, null>('g.dx-radial-links')
+    .data([null])
+    .join('g')
+    .classed('dx-radial-links', true);
+
+  const nodesLayer = g
+    .selectAll<SVGGElement, null>('g.dx-radial-nodes')
+    .data([null])
+    .join('g')
+    .classed('dx-radial-nodes', true);
+
+  const linkPath = linkRadial<any, any>()
+    .angle((d: any) => d.x)
+    .radius((d: any) => d.y);
+
+  linksLayer
+    .selectAll<SVGPathElement, any>('path')
+    .data(root.links(), (d: any) => `${d.source.data.id}->${d.target.data.id}`)
+    .join(
+      (enter) =>
+        enter
+          .append('path')
+          .attr('class', slots.path ?? '')
+          .attr('fill', 'none')
+          .attr('opacity', 0),
+      (update) => update,
+      (exit) => exit.transition().duration(TRANSITION_MS).attr('opacity', 0).remove(),
+    )
+    .transition()
+    .duration(TRANSITION_MS)
+    .attr('opacity', 1)
+    .attr('d', linkPath);
+
+  const node = nodesLayer
+    .selectAll<SVGGElement, any>('g.dx-radial-node')
+    .data(root.descendants(), (d: any) => d.data.id);
+
+  const nodeEnter = node
+    .enter()
+    .append('g')
+    .classed('dx-radial-node', true)
+    .attr('opacity', 0)
+    .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`)
+    .style('cursor', (d: any) => (d.data.children?.length ? 'pointer' : 'default'))
+    .on('click', (_, d: any) => onNodeClick(d.data));
+
+  nodeEnter
+    .append('circle')
+    .attr('r', r)
+    .on('pointerenter', (event: MouseEvent, d: any) => onNodeHover(d.data, event))
+    .on('pointerleave', (event: MouseEvent) => onNodeHover(null, event));
+
+  nodeEnter
+    .append('text')
+    .attr('dy', '0.32em')
+    .attr('paint-order', 'stroke')
+    .text((d: any) => label(d.data));
+
+  const nodeMerge = nodeEnter.merge(node as any);
+
+  nodeMerge
+    .transition()
+    .duration(TRANSITION_MS)
+    .attr('opacity', 1)
+    .attr('transform', (d: any) => `rotate(${(d.x * 180) / Math.PI - 90}) translate(${d.y},0)`);
+
+  nodeMerge
+    .select<SVGCircleElement>('circle')
+    .attr('class', (d: any) => {
+      const collapsedHere = isCollapsed(d.data, collapsed);
+      const leaf = isLeaf(d.data);
+      return [slots.node ?? '', collapsedHere ? 'dx-collapsed' : leaf ? 'dx-leaf' : 'dx-branch']
+        .filter(Boolean)
+        .join(' ');
+    })
+    .attr('r', r);
+
+  nodeMerge
+    .select<SVGTextElement>('text')
+    .attr('class', slots.text ?? '')
+    .attr('transform', (d: any) => (d.x >= Math.PI ? 'rotate(180)' : null))
+    // eslint-disable-next-line no-mixed-operators
+    .attr('x', (d: any) => (d.x < Math.PI === !d.children ? r + 4 : -(r + 4)))
+    // eslint-disable-next-line no-mixed-operators
+    .attr('text-anchor', (d: any) => (d.x < Math.PI === !d.children ? 'start' : 'end'))
+    .text((d: any) => label(d.data));
+
+  node.exit().transition().duration(TRANSITION_MS).attr('opacity', 0).remove();
+};
+
+export default RadialTree;

package/src/components/Tree/layout/TidyTree.tsx

@@ -0,0 +1,246 @@
+//
+// Copyright 2023 DXOS.org
+// Copyright 2024 Observable, Inc.
+//
+
+import { curveBumpX, link as d3Link, select, tree as d3Tree } from 'd3';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+
+import { type TreeNode } from '../types';
+import { buildHierarchy, isCollapsed, isLeaf } from './hierarchy';
+import { type TreeLayoutSlots, defaultTreeLayoutSlots } from './slots';
+import { useContainerSize } from './useContainerSize';
+
+const TRANSITION_MS = 350;
+
+export type TidyTreeProps = ThemedClassName<{
+  data: TreeNode;
+  label?: (d: TreeNode) => string;
+  slots?: TreeLayoutSlots;
+  /** Node radius. */
+  r?: number;
+  /** Margin in screen pixels reserved around the layout. */
+  margin?: number;
+  /** Initial set of collapsed node ids. */
+  initialCollapsed?: Iterable<string>;
+  /** Notified when the user clicks a node. */
+  onNodeClick?: (node: TreeNode) => void;
+}>;
+
+/**
+ * Tidy (horizontal) tree layout based on the D3 reference component.
+ * https://observablehq.com/@d3/tree-component
+ *
+ * Click a node with children to toggle collapse / expand.
+ */
+export const TidyTree = ({
+  classNames,
+  data,
+  label = (d) => d.label ?? d.id,
+  slots = defaultTreeLayoutSlots,
+  r = 4,
+  margin = 24,
+  initialCollapsed,
+  onNodeClick,
+}: TidyTreeProps) => {
+  const svgRef = useRef<SVGSVGElement | null>(null);
+  const { setRef, width, height } = useContainerSize();
+
+  const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set(initialCollapsed ?? []));
+  const toggle = useCallback((id: string) => {
+    setCollapsed((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  }, []);
+
+  // Stable click handler ref so the d3 render fn doesn't need to be re-bound.
+  const handleClickRef = useRef<(node: TreeNode) => void>(() => {});
+  handleClickRef.current = (node: TreeNode) => {
+    onNodeClick?.(node);
+    if (node.children?.length) {
+      toggle(node.id);
+    }
+  };
+
+  const root = useMemo(() => buildHierarchy(data, collapsed), [data, collapsed]);
+
+  useEffect(() => {
+    if (!svgRef.current || !width || !height) {
+      return;
+    }
+
+    renderTidyTree(svgRef.current, root, {
+      width,
+      height,
+      r,
+      margin,
+      label,
+      slots,
+      collapsed,
+      onNodeClick: (n) => handleClickRef.current(n),
+    });
+  }, [root, width, height, r, margin, label, slots, collapsed]);
+
+  return (
+    <div ref={setRef} className={mx('dx-expander relative', classNames)}>
+      {width > 0 && height > 0 && (
+        <svg
+          ref={svgRef}
+          xmlns='http://www.w3.org/2000/svg'
+          width={width}
+          height={height}
+          viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}
+        />
+      )}
+    </div>
+  );
+};
+
+type RenderOptions = {
+  width: number;
+  height: number;
+  r: number;
+  margin: number;
+  label: (d: TreeNode) => string;
+  slots: TreeLayoutSlots;
+  collapsed: Set<string>;
+  onNodeClick: (node: TreeNode) => void;
+};
+
+const renderTidyTree = (svgElement: SVGSVGElement, root: any, options: RenderOptions) => {
+  const { width, height, r, margin, label, slots, collapsed, onNodeClick } = options;
+  const svg = select(svgElement);
+
+  // Compute layout: nodeSize gives a stable, content-driven scale.
+  // dx = vertical spacing between siblings; dy = horizontal spacing between depths.
+  const dx = 18;
+  const dy = Math.max(60, (width - margin * 2) / Math.max(1, root.height + 1));
+  d3Tree<TreeNode>().nodeSize([dx, dy])(root);
+
+  // Center the tree vertically; lay it out horizontally from left.
+  let x0 = Infinity;
+  let x1 = -x0;
+  root.each((d: any) => {
+    if (d.x > x1) {
+      x1 = d.x;
+    }
+    if (d.x < x0) {
+      x0 = d.x;
+    }
+  });
+
+  const treeWidth = width - margin * 2;
+  const treeHeight = x1 - x0;
+  const scaleY = treeHeight > 0 ? Math.min(1, (height - margin * 2) / treeHeight) : 1;
+  const offsetX = -treeWidth / 2;
+  const offsetY = -(x0 + x1) / 2;
+
+  // Root group ensures consistent transforms on re-renders.
+  const g = svg.selectAll<SVGGElement, null>('g.dx-tidy-root').data([null]).join('g').classed('dx-tidy-root', true);
+
+  // Links layer.
+  const linksLayer = g
+    .selectAll<SVGGElement, null>('g.dx-tidy-links')
+    .data([null])
+    .join('g')
+    .classed('dx-tidy-links', true);
+
+  // Nodes layer (rendered above links).
+  const nodesLayer = g
+    .selectAll<SVGGElement, null>('g.dx-tidy-nodes')
+    .data([null])
+    .join('g')
+    .classed('dx-tidy-nodes', true);
+
+  // Links.
+  const linkPath = d3Link<any, any>(curveBumpX)
+    .x((d: any) => offsetX + d.y)
+    .y((d: any) => (d.x + offsetY) * scaleY);
+
+  linksLayer
+    .selectAll<SVGPathElement, any>('path')
+    .data(root.links(), (d: any) => `${d.source.data.id}->${d.target.data.id}`)
+    .join(
+      (enter) =>
+        enter
+          .append('path')
+          .attr('class', slots.path ?? '')
+          .attr('fill', 'none')
+          .attr('opacity', 0),
+      (update) => update,
+      (exit) => exit.transition().duration(TRANSITION_MS).attr('opacity', 0).remove(),
+    )
+    .transition()
+    .duration(TRANSITION_MS)
+    .attr('opacity', 1)
+    .attr('d', linkPath);
+
+  // Nodes.
+  const node = nodesLayer.selectAll<SVGGElement, any>('g.dx-tidy-node').data(root.descendants(), (d: any) => d.data.id);
+
+  const nodeEnter = node
+    .enter()
+    .append('g')
+    .classed('dx-tidy-node', true)
+    .attr('transform', (d: any) => `translate(${offsetX + d.y},${(d.x + offsetY) * scaleY})`)
+    .attr('opacity', 0)
+    .style('cursor', (d: any) => (d.data.children?.length ? 'pointer' : 'default'))
+    .on('click', (_, d: any) => onNodeClick(d.data));
+
+  nodeEnter.append('circle').attr('r', r);
+  nodeEnter
+    .append('text')
+    .attr('dy', '0.32em')
+    .attr('x', (d: any) => (d.children ? -(r + 4) : r + 4))
+    .attr('text-anchor', (d: any) => (d.children ? 'end' : 'start'))
+    .text((d: any) => label(d.data));
+
+  const nodeMerge = nodeEnter.merge(node as any);
+
+  nodeMerge
+    .transition()
+    .duration(TRANSITION_MS)
+    .attr('opacity', 1)
+    .attr('transform', (d: any) => `translate(${offsetX + d.y},${(d.x + offsetY) * scaleY})`);
+
+  // Circle: filled when collapsed (has hidden children), outlined when expanded or leaf.
+  nodeMerge
+    .select<SVGCircleElement>('circle')
+    .attr('class', (d: any) => {
+      const collapsedHere = isCollapsed(d.data, collapsed);
+      const leaf = isLeaf(d.data);
+      return [slots.node ?? '', collapsedHere ? 'dx-collapsed' : leaf ? 'dx-leaf' : 'dx-branch']
+        .filter(Boolean)
+        .join(' ');
+    })
+    .attr('r', r);
+
+  nodeMerge
+    .select<SVGTextElement>('text')
+    .attr('class', slots.text ?? '')
+    .attr('x', (d: any) => (d.children ? -(r + 4) : r + 4))
+    .attr('text-anchor', (d: any) => (d.children ? 'end' : 'start'))
+    .text((d: any) => label(d.data));
+
+  node
+    .exit()
+    .each(function () {
+      // Cancel any in-flight transitions so .remove() actually fires.
+      select(this).interrupt();
+    })
+    .transition()
+    .duration(TRANSITION_MS)
+    .attr('opacity', 0)
+    .remove();
+};
+
+export default TidyTree;

package/src/components/Tree/layout/hierarchy.ts

@@ -0,0 +1,32 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type HierarchyNode, hierarchy as d3Hierarchy } from 'd3';
+
+import { type TreeNode } from '../types';
+
+/**
+ * Build a d3 hierarchy from a TreeNode, pruning children of nodes whose ids are in `collapsed`.
+ * Nodes that have children but are collapsed retain their identity in the hierarchy and can be
+ * distinguished by `node._children` (the original list).
+ */
+export const buildHierarchy = (data: TreeNode, collapsed: Set<string> = new Set()): HierarchyNode<TreeNode> => {
+  return d3Hierarchy<TreeNode>(data, (d) => {
+    if (!d.children?.length) {
+      return undefined;
+    }
+    return collapsed.has(d.id) ? undefined : d.children;
+  });
+};
+
+/**
+ * True when the node has children that have been hidden via collapse.
+ */
+export const isCollapsed = (data: TreeNode, collapsed: Set<string>): boolean =>
+  Boolean(data.children?.length) && collapsed.has(data.id);
+
+/**
+ * True when the node has no children at all (a real leaf, not a collapsed branch).
+ */
+export const isLeaf = (data: TreeNode): boolean => !data.children?.length;

package/src/components/Tree/layout/index.ts

@@ -2,8 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import HierarchicalEdgeBundling from './HierarchicalEdgeBundling';
-import RadialTree from './RadialTree';
-import TidyTree from './TidyTree';
-
-export { HierarchicalEdgeBundling, RadialTree, TidyTree };
+export * from './HierarchicalEdgeBundling';
+export * from './RadialTree';
+export * from './TidyTree';
+export * from './hierarchy';
+export * from './slots';

package/src/components/Tree/layout/slots.ts

@@ -0,0 +1,19 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export type TreeLayoutSlots = {
+  node?: string;
+  path?: string;
+  text?: string;
+};
+
+export const defaultTreeLayoutSlots: TreeLayoutSlots = {
+  // Cursor + transition so the hover swap reads clearly; SVG circles support the `:hover` pseudo-class
+  // via Tailwind variants exactly like HTML elements.
+  node: 'fill-blue-600 hover:fill-orange-500 cursor-pointer transition-colors',
+  // 0.5px is fine on a white background, but on a dark Storybook background the lines disappear.
+  // Use stroke-1 with opacity 50% so they read in both themes; dx-bundle-dim/out/in further tune on hover.
+  path: 'fill-none stroke-blue-500/50 stroke-[1px] dark:stroke-blue-400/60',
+  text: 'fill-neutral-700 dark:fill-neutral-300 text-xs hover:fill-orange-500 cursor-pointer transition-colors',
+};

package/src/components/Tree/layout/useContainerSize.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Track an element's content-box size via ResizeObserver.
+ * Returns the most recently observed `{ width, height }` plus a callback ref to attach to the element.
+ *
+ * Why not `react-resize-detector` directly: its `targetRef` API doesn't pick up a ref whose
+ * `.current` is set later than the hook runs, and the returned-`ref` API forces the consumer to
+ * forward a callback ref through their own component — which is awkward for class refs.
+ * This hook returns a setter so the consumer assigns it directly to `<div ref={setRef}>`.
+ */
+export const useContainerSize = (): {
+  setRef: (el: HTMLDivElement | null) => void;
+  width: number;
+  height: number;
+} => {
+  const [el, setEl] = useState<HTMLDivElement | null>(null);
+  const [size, setSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!el) {
+      return;
+    }
+    const rect = el.getBoundingClientRect();
+    setSize({ width: rect.width, height: rect.height });
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (!entry) {
+        return;
+      }
+      const { width, height } = entry.contentRect;
+      setSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }));
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [el]);
+
+  return { setRef: setEl, width: size.width, height: size.height };
+};

package/src/components/Tree/space-graph-adapter.ts

@@ -0,0 +1,96 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Obj } from '@dxos/echo';
+import { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';
+
+import { type BundleEdge } from './layout';
+import { type TreeNode } from './types';
+
+const ROOT_ID = 'db:root';
+const SCHEMA_PREFIX = 'schema:';
+
+const truncate = (id: string) => `${id.slice(0, 4)}…${id.slice(-4)}`;
+
+const labelOf = (node: SpaceGraphNode): string => node.data?.label ?? truncate(node.id);
+
+export type SpaceGraphHierarchy = {
+  /** Hierarchy where leaves carry the underlying ECHO object on `node.data`. */
+  tree: TreeNode<Obj.Unknown>;
+  /** Edges between leaf objects derived from relations and refs in the graph. */
+  edges: BundleEdge[];
+};
+
+export type SpaceGraphHierarchyOptions = {
+  rootLabel?: string;
+  rootId?: string;
+};
+
+/**
+ * Convert a {@link SpaceGraphModel} graph into a hierarchy suitable for the cluster / bundling layouts:
+ *
+ *     Root (db)
+ *     ├── Schema A
+ *     │   ├── Object a1
+ *     │   └── Object a2
+ *     └── Schema B
+ *         └── Object b1
+ *
+ * Leaves are ECHO objects. Their schema typename is the intermediate group.
+ * `rootLabel` is shown on the root node (typically the database name or "Space").
+ *
+ * `edges` exposes object-to-object edges (relations + refs) so the bundling
+ * layout can route bundled curves between leaves through their common ancestor.
+ */
+export const spaceGraphToHierarchy = (
+  model: SpaceGraphModel,
+  { rootLabel = 'Database', rootId = ROOT_ID }: SpaceGraphHierarchyOptions = {},
+): SpaceGraphHierarchy => {
+  const graph = model.graph;
+  const objectNodes = graph.nodes.filter((node) => node.type === 'object');
+
+  // Group object nodes by typename. Fall back to '(untyped)' so they stay visible.
+  const byTypename = new Map<string, SpaceGraphNode[]>();
+  for (const node of objectNodes) {
+    const obj = node.data?.object as Obj.Unknown | undefined;
+    const typename = (obj && Obj.getTypename(obj)) ?? '(untyped)';
+    const bucket = byTypename.get(typename) ?? [];
+    bucket.push(node);
+    byTypename.set(typename, bucket);
+  }
+
+  const tree: TreeNode<Obj.Unknown> = {
+    id: rootId,
+    label: rootLabel,
+    children: Array.from(byTypename.entries()).map(([typename, nodes]) => ({
+      id: `${SCHEMA_PREFIX}${typename}`,
+      label: shortTypename(typename),
+      children: nodes.map((node) => ({
+        id: node.id,
+        label: labelOf(node),
+        // Preserve the ECHO object on the leaf so layouts can fire hover/inspect callbacks with it.
+        data: node.data?.object,
+      })),
+    })),
+  };
+
+  // Filter edges to those that connect two distinct leaf objects in the hierarchy.
+  const objectIds = new Set(objectNodes.map((n) => n.id));
+  const edges: BundleEdge[] = graph.edges
+    .filter((edge: SpaceGraphEdge) => objectIds.has(edge.source) && objectIds.has(edge.target))
+    .filter((edge: SpaceGraphEdge) => edge.source !== edge.target)
+    .map((edge: SpaceGraphEdge) => ({
+      source: edge.source,
+      target: edge.target,
+      kind: edge.type,
+    }));
+
+  return { tree, edges };
+};
+
+/** Drop the package prefix (`org.dxos.type.foo` → `Foo`) for display. */
+const shortTypename = (typename: string): string => {
+  const last = typename.split('.').pop() ?? typename;
+  return last.charAt(0).toUpperCase() + last.slice(1);
+};

package/src/components/Tree/testing/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './generator';
+export * from './relations';