@dxos/plugin-explorer 0.9.1-main.c7dcc2e112 → 0.9.1-staging.ee54ba693a

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

@@ -1,16 +1,32 @@
 import {
+  Tree,
+  TreeNodeType,
+  TreeType,
   treeTypeToTreeNode
-} from "../chunk-7XUDLV6E.mjs";
-import {
-  createAdapter,
-  getNodeFillForObject
-} from "../chunk-IKHJV3Q4.mjs";
+} from "../chunk-EZ52JY7X.mjs";
 import "../chunk-J5LGTIGS.mjs";
 
 // src/components/Chart/Chart.tsx
 import * as Plot from "@observablehq/plot";
 import React, { useEffect } from "react";
 import { useResizeDetector } from "react-resize-detector";
+
+// src/util/node-color.ts
+import { Obj } from "@dxos/echo";
+import { getHashHue } from "@dxos/ui-theme";
+var getNodeFillForTypename = (typename) => {
+  return `var(--color-${getHashHue(typename)}-400)`;
+};
+var getNodeFillForObject = (object) => {
+  return getNodeFillForTypename(object && Obj.getTypename(object));
+};
+
+// src/util/plot.ts
+var createAdapter = (prop, accessor) => accessor ? {
+  transform: (values) => values.map((value) => accessor(value)[prop])
+} : prop;
+
+// src/components/Chart/Chart.tsx
 var defaultOptions = {
   r: 4,
   stroke: "gray",
@@ -10934,7 +10950,7 @@ var assignRef = (ref, value) => {
 // src/components/Graph/ForceGraph.tsx
 import { Atom, useAtomValue } from "@effect-atom/atom-react";
 import React4, { useCallback as useCallback2, useEffect as useEffect4, useMemo, useRef as useRef2, useState as useState2 } from "react";
-import { Obj } from "@dxos/echo";
+import { Obj as Obj2 } from "@dxos/echo";
 import { SelectionModel } from "@dxos/graph";
 import { composable as composable2, composableProps as composableProps2 } from "@dxos/react-ui";
 import { GraphForceProjector, SVG } from "@dxos/react-ui-graph";
@@ -11010,7 +11026,7 @@ var ForceGraph = composable2(({ model, selection: selectionProp, grid, drag, onI
         const obj = node.data?.data.object;
         return {
           data: {
-            color: getHashStyles(obj && Obj.getTypename(obj))?.hue
+            color: getHashStyles(obj && Obj2.getTypename(obj))?.hue
           },
           classes: {
             "dx-selected": selection.contains(node.id)
@@ -11025,50 +11041,9 @@ var ForceGraph = composable2(({ model, selection: selectionProp, grid, drag, onI
 
 // src/components/Lattice/Lattice.tsx
 import { select } from "d3";
-import React5, { useEffect as useEffect6, useMemo as useMemo2, useRef as useRef3 } from "react";
-import { Obj as Obj2 } from "@dxos/echo";
-
-// src/components/Tree/layout/useContainerSize.ts
-import { useEffect as useEffect5, useState as useState3 } from "react";
-var useContainerSize = () => {
-  const [el, setEl] = useState3(null);
-  const [size, setSize] = useState3({
-    width: 0,
-    height: 0
-  });
-  useEffect5(() => {
-    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
-  };
-};
-
-// src/components/Lattice/Lattice.tsx
+import React5, { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { Obj as Obj3 } from "@dxos/echo";
+import { useContainerSize } from "@dxos/react-ui-graph";
 var TRANSITION_MS = 350;
 var Lattice = ({ nodes, padding = 16, onNodeHover }) => {
   const svgRef = useRef3(null);
@@ -11079,8 +11054,8 @@ var Lattice = ({ nodes, padding = 16, onNodeHover }) => {
       if (!object) {
         return void 0;
       }
-      const label = node.data?.label ?? Obj2.getLabel(object) ?? node.id;
-      const typename = Obj2.getTypename(object) ?? "(untyped)";
+      const label = node.data?.label ?? Obj3.getLabel(object) ?? node.id;
+      const typename = Obj3.getTypename(object) ?? "(untyped)";
       return {
         id: node.id,
         label,
@@ -11093,7 +11068,7 @@ var Lattice = ({ nodes, padding = 16, onNodeHover }) => {
   ]);
   const handleHoverRef = useRef3(void 0);
   handleHoverRef.current = onNodeHover;
-  useEffect6(() => {
+  useEffect5(() => {
     if (!svgRef.current || !width || !height) {
       return;
     }
@@ -11167,501 +11142,450 @@ var renderLattice = (svgElement, cells, options) => {
   }, event)).on("pointerleave", () => onNodeHover(null));
 };
 
-// src/components/Tree/Tree.tsx
-import React9, { useMemo as useMemo6 } from "react";
+// src/components/Visualization/Visualization.tsx
+import { createContext } from "@radix-ui/react-context";
+import { Slot } from "@radix-ui/react-slot";
+import React6, { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
+import { composableProps as composableProps3, slottable } from "@dxos/react-ui";
+import { GraphSwarmProjector as GraphSwarmProjector2, SVG as SVG2 } from "@dxos/react-ui-graph";
 
-// src/components/Tree/layout/HierarchicalEdgeBundling.tsx
-import { cluster, curveBundle, hierarchy, lineRadial, select as select2 } from "d3";
-import React6, { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef4 } from "react";
-import { mx } from "@dxos/ui-theme";
-
-// src/components/Tree/layout/slots.ts
-var defaultTreeLayoutSlots = {
-  // 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"
-};
-
-// src/components/Tree/layout/HierarchicalEdgeBundling.tsx
-var TRANSITION_MS2 = 350;
-var HierarchicalEdgeBundling = ({ classNames, data, edges = [], label = (d) => d.label ?? d.id, padding = 120, tension = 0.85, r = 4, slots = defaultTreeLayoutSlots, onNodeHover }) => {
-  const svgRef = useRef4(null);
-  const { setRef, width, height } = useContainerSize();
-  const root = useMemo3(() => buildBundleHierarchy(data, edges), [
-    data,
-    edges
-  ]);
-  const handleHoverRef = useRef4(() => {
-  });
-  handleHoverRef.current = (node, event) => onNodeHover?.(node, event);
-  useEffect7(() => {
-    if (!svgRef.current || !width || !height) {
-      return;
-    }
-    const radius = Math.max(0, Math.min(width, height) / 2 - padding);
-    renderBundling(svgRef.current, root, {
-      radius,
-      r,
-      label,
-      slots,
-      tension,
-      onNodeHover: (n, e) => handleHoverRef.current(n, e)
-    });
-  }, [
-    root,
-    width,
-    height,
-    padding,
-    tension,
-    r,
-    label,
-    slots
-  ]);
-  return /* @__PURE__ */ React6.createElement("div", {
-    ref: setRef,
-    className: mx("dx-expander relative", classNames)
-  }, width > 0 && height > 0 && /* @__PURE__ */ React6.createElement("svg", {
-    ref: svgRef,
-    xmlns: "http://www.w3.org/2000/svg",
-    width,
-    height,
-    viewBox: `${-width / 2} ${-height / 2} ${width} ${height}`
-  }));
-};
-var buildBundleHierarchy = (data, edges) => {
-  const root = hierarchy(data);
-  const byId = /* @__PURE__ */ new Map();
-  for (const node of root.descendants()) {
-    byId.set(node.data.id, node);
-    node.outgoing = [];
-    node.incoming = [];
+// src/components/Visualization/variants.ts
+import { curveCatmullRom, line as d3Line } from "d3";
+import { Obj as Obj4 } from "@dxos/echo";
+import { CLUSTER_NODE_TYPE_LEAF, CLUSTER_NODE_TYPE_ROOT, GraphBundleProjector, GraphClusterProjector, GraphForceProjector as GraphForceProjector2, GraphLatticeProjector, GraphPlexusProjector, GraphSwarmProjector, GraphTreeProjector, PLEXUS_NODE_TYPE_FOCUS, PLEXUS_NODE_TYPE_RELATION, TREE_NODE_TYPE_INBOUND, TREE_NODE_TYPE_ROOT, appendRadialGroupLabel, appendRadialLeafLabel, appendRootLabel } from "@dxos/react-ui-graph";
+var TWEEN_MS = 500;
+var LABEL_FADE_MS = 200;
+var PLEXUS_LEAF_RADIUS = 5;
+var PLEXUS_FOCUS_RADIUS = PLEXUS_LEAF_RADIUS * 2;
+var TREE_NODE_RADIUS = 6;
+var TREE_ROOT_RADIUS = TREE_NODE_RADIUS * 2;
+var swarmTrailLine = d3Line().curve(curveCatmullRom.alpha(0.5));
+var applyNodeSwarm = (group, node) => {
+  const swarm = node;
+  const path = group.querySelector("path.dx-swarm-tail");
+  const grad = group.querySelector("linearGradient");
+  if (!path || !grad) {
+    return;
   }
-  for (const edge of edges) {
-    const source = byId.get(edge.source);
-    const target = byId.get(edge.target);
-    if (!source || !target || source === target) {
-      continue;
-    }
-    source.outgoing.push([
-      source,
-      target,
-      edge
-    ]);
-    target.incoming.push([
-      source,
-      target,
-      edge
+  const history = swarm.history ?? [];
+  if (history.length === 0) {
+    path.setAttribute("d", "");
+    return;
+  }
+  const hx = swarm.x ?? 0;
+  const hy = swarm.y ?? 0;
+  const points = [
+    [
+      0,
+      0
+    ]
+  ];
+  for (let i = history.length - 1; i >= 0; i--) {
+    points.push([
+      history[i].x - hx,
+      history[i].y - hy
     ]);
   }
-  return root;
+  path.setAttribute("d", swarmTrailLine(points) ?? "");
+  const oldest = history[0];
+  grad.setAttribute("x2", String(oldest.x - hx));
+  grad.setAttribute("y2", String(oldest.y - hy));
 };
-var renderBundling = (svgElement, root, options) => {
-  const { radius, r, tension, label, slots, onNodeHover } = options;
-  const svg = select2(svgElement);
-  if (!root.children?.length) {
-    svg.selectAll("g.dx-bundle-root").remove();
-    return;
+var plexusRelationOf = (edge, focusId) => {
+  const outgoing = edge.source.id === focusId;
+  const incoming = edge.target.id === focusId;
+  if (!outgoing && !incoming) {
+    return void 0;
   }
-  cluster().size([
-    2 * Math.PI,
-    radius
-  ])(root);
-  const g = svg.selectAll("g.dx-bundle-root").data([
-    null
-  ]).join("g").classed("dx-bundle-root", true);
-  const linksLayer = g.selectAll("g.dx-bundle-links").data([
-    null
-  ]).join("g").classed("dx-bundle-links", true);
-  const nodesLayer = g.selectAll("g.dx-bundle-nodes").data([
-    null
-  ]).join("g").classed("dx-bundle-nodes", true);
-  const line = lineRadial().curve(curveBundle.beta(tension)).radius((d) => d.y).angle((d) => d.x);
-  const leaves = root.leaves();
-  const flatEdges = leaves.flatMap((leaf) => leaf.outgoing ?? []);
-  const paths = linksLayer.selectAll("path").data(flatEdges, (d) => `${d[0].data.id}->${d[1].data.id}`).join((enter) => enter.append("path").attr("class", slots.path ?? "").attr("fill", "none").attr("opacity", 0), (update) => update, (exit) => exit.each(function() {
-    select2(this).interrupt();
-  }).transition().duration(TRANSITION_MS2).attr("opacity", 0).remove());
-  paths.each(function(d) {
-    d[0].pathEl = this;
-  }).transition().duration(TRANSITION_MS2).attr("opacity", 1).attr("d", ([s, t]) => line(s.path(t)));
-  const labels = nodesLayer.selectAll("g.dx-bundle-leaf").data(leaves, (d) => d.data.id).join((enter) => {
-    const ge = enter.append("g").classed("dx-bundle-leaf", true).attr("opacity", 0);
-    ge.append("circle").style("cursor", "pointer");
-    ge.append("text").attr("dy", "0.32em").attr("paint-order", "stroke").style("cursor", "pointer");
-    return ge;
-  }, (update) => update, (exit) => exit.each(function() {
-    select2(this).interrupt();
-  }).transition().duration(TRANSITION_MS2).attr("opacity", 0).remove());
-  labels.transition().duration(TRANSITION_MS2).attr("opacity", 1).attr("transform", (d) => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`);
-  const onEnter = function(event, d) {
-    onNodeHover(d.data, event);
-    hover(linksLayer, leaves, d, true);
-  };
-  const onLeave = function(event, d) {
-    onNodeHover(null);
-    hover(linksLayer, leaves, d, false);
-  };
-  labels.select("circle").attr("class", [
-    slots.node ?? "",
-    "dx-leaf"
-  ].filter(Boolean).join(" ")).attr("r", r).style("fill", (d) => getNodeFillForObject(d.data.data)).each(function(d) {
-    d.circle = this;
-  }).on("pointerenter", onEnter).on("pointerleave", onLeave);
-  labels.select("text").attr("class", slots.text ?? "").attr("x", (d) => d.x < Math.PI ? r + 4 : -(r + 4)).attr("text-anchor", (d) => d.x < Math.PI ? "start" : "end").attr("transform", (d) => d.x >= Math.PI ? "rotate(180)" : null).each(function(d) {
-    d.text = this;
-  }).text((d) => label(d.data)).on("pointerenter", onEnter).on("pointerleave", onLeave);
+  const direction = outgoing ? "out" : "in";
+  const arrow = outgoing ? "\u2192" : "\u2190";
+  if (edge.type === "relation") {
+    const relation = edge.data?.object;
+    const typename = relation ? Obj4.getTypename(relation) : void 0;
+    const name = typename ? shortTypename(typename) : "Relation";
+    return {
+      key: `relation:${direction}:${typename ?? "?"}`,
+      label: `${name} ${arrow}`
+    };
+  }
+  if (edge.type === "ref") {
+    const property = edge.data?.property;
+    const name = property ?? "References";
+    return {
+      key: `ref:${direction}:${property ?? "?"}`,
+      label: `${name} ${arrow}`
+    };
+  }
+  return void 0;
 };
-var hover = (linksLayer, leaves, focused, on) => {
-  const outgoing = new Set((focused.outgoing ?? []).map(([, t]) => t));
-  const incoming = new Set((focused.incoming ?? []).map(([s]) => s));
-  linksLayer.selectAll("path").style("stroke", (d) => {
-    if (!on) {
-      return null;
-    }
-    if (d[0] === focused) {
-      return "var(--color-orange-500)";
-    }
-    if (d[1] === focused) {
-      return "var(--color-sky-500)";
+var typenameGroupOf = (node) => {
+  const obj = node.data?.data?.object;
+  return obj ? Obj4.getTypename(obj) ?? "(untyped)" : void 0;
+};
+var shortTypename = (typename) => {
+  const last = typename.split(".").pop() ?? typename;
+  return last.charAt(0).toUpperCase() + last.slice(1);
+};
+var labelForLeaf = (node, obj) => (obj && Obj4.getLabel(obj)) ?? node.data?.data?.label ?? node.id;
+var appendTreeLabel = (group, text, r, placement) => {
+  const offset = r + 4;
+  const label = group.append("text").attr("class", "dx-cluster-label").attr("opacity", 0).style("cursor", "pointer");
+  if (placement === "above") {
+    label.attr("x", 0).attr("y", -offset).attr("text-anchor", "middle");
+  } else {
+    const toLeft = placement === "left";
+    label.attr("dy", "0.32em").attr("x", toLeft ? -offset : offset).attr("text-anchor", toLeft ? "end" : "start");
+  }
+  label.text(text).transition().delay(TWEEN_MS).duration(LABEL_FADE_MS).attr("opacity", 1);
+};
+var DEFINITIONS = {
+  force: {
+    value: "force",
+    icon: "ph--graph--regular",
+    label: "Force-directed",
+    drag: true,
+    emitsHover: true,
+    // Force has no `duration` — its own simulation drives motion via ticks.
+    createProjector: (ctx, { prev }) => new GraphForceProjector2(ctx, void 0, void 0, prev),
+    renderNode: (group, node) => {
+      const r = node.r ?? 6;
+      group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", getNodeFillForObject(node.data?.data?.object));
     }
-    return null;
-  }).style("stroke-width", (d) => on && (d[0] === focused || d[1] === focused) ? "1.5px" : null).style("opacity", (d) => on && d[0] !== focused && d[1] !== focused ? "0.08" : null);
-  for (const leaf of leaves) {
-    const isOut = outgoing.has(leaf);
-    const isIn = incoming.has(leaf);
-    const isConnected = isOut || isIn;
-    if (leaf.text) {
-      select2(leaf.text).style("fill", () => {
-        if (!on) {
-          return null;
+  },
+  cluster: {
+    value: "cluster",
+    icon: "ph--asterisk-simple--regular",
+    label: "Radial",
+    emitsHover: true,
+    createProjector: (ctx, { prev }) => new GraphClusterProjector(ctx, {
+      duration: TWEEN_MS,
+      groupOf: typenameGroupOf,
+      rootLabel: "Database",
+      groupLabel: shortTypename,
+      // All three node kinds share the same radius — leaves, groups, and root read
+      // as members of the same circle rather than ranked by size.
+      rootRadius: 4,
+      groupRadius: 4
+    }, void 0, prev),
+    renderNode: (group, node) => {
+      const obj = node.data?.data?.object;
+      const r = node.r ?? 4;
+      group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
+      const labelOptions = {
+        delay: TWEEN_MS,
+        duration: LABEL_FADE_MS
+      };
+      if (node.type === CLUSTER_NODE_TYPE_LEAF) {
+        const text = labelForLeaf(node, obj);
+        if (text) {
+          appendRadialLeafLabel(group, node, text, r, labelOptions);
         }
-        if (leaf === focused) {
-          return "var(--color-neutral-900)";
+      } else if (node.type === CLUSTER_NODE_TYPE_ROOT) {
+        if (node.label) {
+          appendRootLabel(group, node.label, r, labelOptions);
         }
-        if (isOut) {
-          return "var(--color-orange-500)";
+      } else {
+        if (node.label) {
+          appendRadialGroupLabel(group, node, node.label, r, labelOptions);
+        }
+      }
+    }
+  },
+  bundle: {
+    value: "bundle",
+    icon: "ph--circles-three-plus--regular",
+    label: "Connections",
+    highlightOnHover: true,
+    emitsHover: true,
+    createProjector: (ctx, { prev }) => new GraphBundleProjector(ctx, {
+      duration: TWEEN_MS,
+      groupOf: typenameGroupOf
+    }, void 0, prev),
+    // Bundle layout renders ONLY leaves (root/group are invisible routing anchors).
+    renderNode: (group, node) => {
+      const obj = node.data?.data?.object;
+      const r = node.r ?? 4;
+      group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
+      const text = labelForLeaf(node, obj);
+      if (text) {
+        appendRadialLeafLabel(group, node, text, r, {
+          delay: TWEEN_MS,
+          duration: LABEL_FADE_MS
+        });
+      }
+    }
+  },
+  plexus: {
+    value: "plexus",
+    icon: "ph--share-network--regular",
+    label: "Plexus",
+    focusable: true,
+    // No focus → dispatch to the bundle projector (the unfocused overview). Once a node is
+    // focused, switch to the focus-centric plexus layout; both receive `prev` so the swap
+    // (and every re-focus) animates from the previous node positions.
+    createProjector: (ctx, { focusId, prev }) => {
+      if (!focusId) {
+        return new GraphBundleProjector(ctx, {
+          duration: TWEEN_MS,
+          groupOf: typenameGroupOf
+        }, void 0, prev);
+      }
+      return new GraphPlexusProjector(ctx, {
+        duration: TWEEN_MS,
+        focus: focusId,
+        relationOf: plexusRelationOf,
+        leafRadius: PLEXUS_LEAF_RADIUS,
+        relationRadius: PLEXUS_LEAF_RADIUS,
+        focusRadius: PLEXUS_FOCUS_RADIUS
+      }, void 0, prev);
+    },
+    // Three node kinds: the focus at the centre (larger, object fill), synthetic relation
+    // nodes on the inner ring (neutral, labelled by relation/property), and object leaves on
+    // the outer ring (object fill). Type tags are set by the projector.
+    renderNode: (group, node) => {
+      const obj = node.data?.data?.object;
+      const labelOptions = {
+        delay: TWEEN_MS,
+        duration: LABEL_FADE_MS
+      };
+      if (node.type === PLEXUS_NODE_TYPE_RELATION) {
+        const r2 = PLEXUS_LEAF_RADIUS;
+        group.append("circle").attr("r", r2).style("cursor", "default").style("fill", "var(--color-neutral-500)");
+        if (node.label) {
+          appendRadialGroupLabel(group, node, node.label, r2, labelOptions);
         }
-        if (isIn) {
-          return "var(--color-sky-500)";
+        return;
+      }
+      const isFocus = node.type === PLEXUS_NODE_TYPE_FOCUS;
+      const r = isFocus ? PLEXUS_FOCUS_RADIUS : PLEXUS_LEAF_RADIUS;
+      group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
+      const text = labelForLeaf(node, obj);
+      if (text) {
+        if (isFocus) {
+          appendRootLabel(group, text, r, labelOptions);
+        } else {
+          appendRadialLeafLabel(group, node, text, r, labelOptions);
         }
-        return null;
-      }).style("font-weight", () => on && leaf === focused ? "600" : null);
+      }
     }
-    if (leaf.circle) {
-      select2(leaf.circle).style("stroke", () => on && isConnected ? "var(--color-orange-400)" : null).style("stroke-width", () => on && isConnected ? "2.5px" : null).style("opacity", () => on && !isConnected && leaf !== focused ? "0.15" : null);
+  },
+  lattice: {
+    value: "lattice",
+    icon: "ph--grid-four--regular",
+    label: "Lattice",
+    emitsHover: true,
+    createProjector: (ctx, { prev }) => new GraphLatticeProjector(ctx, {
+      duration: TWEEN_MS,
+      // Plugin-explorer overrides the projector's force-matched default (6)
+      // with a smaller node so the lattice reads as a dense matrix.
+      radius: 4,
+      // Cluster by typename first so same-type rects sit together; break ties by label.
+      sortBy: (node) => {
+        const obj = node.data?.data?.object;
+        const typename = obj ? Obj4.getTypename(obj) ?? "(untyped)" : "(untyped)";
+        const label = (obj && Obj4.getLabel(obj)) ?? node.data?.data?.label ?? node.id;
+        return `${typename} ${label}`;
+      }
+    }, void 0, prev),
+    renderNode: (group, node) => {
+      const r = node.r ?? 6;
+      const sz = r * 2;
+      group.append("rect").attr("x", -r).attr("y", -r).attr("width", sz).attr("height", sz).attr("rx", r * 0.3).attr("ry", r * 0.3).style("cursor", "pointer").style("fill", getNodeFillForObject(node.data?.data?.object));
     }
-  }
-};
-
-// src/components/Tree/layout/RadialTree.tsx
-import { cluster as d3Cluster, linkRadial, select as select3, tree as d3Tree } from "d3";
-import React7, { useCallback as useCallback3, useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState4 } from "react";
-import { mx as mx2 } from "@dxos/ui-theme";
-
-// src/components/Tree/layout/hierarchy.ts
-import { hierarchy as d3Hierarchy } from "d3";
-var buildHierarchy = (data, collapsed = /* @__PURE__ */ new Set()) => {
-  return d3Hierarchy(data, (d) => {
-    if (!d.children?.length) {
-      return void 0;
+  },
+  swarm: {
+    value: "swarm",
+    icon: "ph--microscope--regular",
+    label: "Swarm",
+    edgeOpacity: 0.3,
+    trackPointer: true,
+    emitsHover: true,
+    applyNode: applyNodeSwarm,
+    // Swarm in SVG: a per-tick projector mirroring force's emit-positions pattern.
+    createProjector: (ctx, { prev }) => new GraphSwarmProjector(ctx, void 0, void 0, prev),
+    // Match the force variant's shape so identity-by-id transitions read continuously.
+    // The tail is a SINGLE `<path>` traced through head + history points; its stroke
+    // uses a per-boid `<linearGradient>` that fades head → tail. Done this way (rather
+    // than as N overlapping `<line>` segments) so coincident segment endpoints don't
+    // compound their alpha and read as a striped trail.
+    renderNode: (group, node) => {
+      const fill = getNodeFillForObject(node.data?.data?.object);
+      const r = node.r ?? 6;
+      const strokeWidth = Math.max(1, r * 0.6);
+      const gradId = `dx-swarm-grad-${String(node.id).replace(/[^\w-]/g, "_")}`;
+      const grad = group.append("defs").append("linearGradient").attr("id", gradId).attr("gradientUnits", "userSpaceOnUse").attr("x1", 0).attr("y1", 0).attr("x2", 0).attr("y2", 0);
+      grad.append("stop").attr("offset", 0).attr("stop-color", fill).attr("stop-opacity", 0.7);
+      grad.append("stop").attr("offset", 1).attr("stop-color", fill).attr("stop-opacity", 0);
+      group.append("path").classed("dx-swarm-tail", true).attr("fill", "none").attr("stroke", `url(#${gradId})`).attr("stroke-width", strokeWidth).attr("stroke-linecap", "round").attr("stroke-linejoin", "round").attr("pointer-events", "none");
+      group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", fill);
     }
-    return collapsed.has(d.id) ? void 0 : d.children;
-  });
-};
-var isCollapsed = (data, collapsed) => Boolean(data.children?.length) && collapsed.has(data.id);
-var isLeaf = (data) => !data.children?.length;
-
-// src/components/Tree/layout/RadialTree.tsx
-var TRANSITION_MS3 = 350;
-var RadialTree = ({ classNames, data, label = (d) => d.label ?? d.id, slots = defaultTreeLayoutSlots, r = 4, padding = 80, initialCollapsed, cluster: cluster2 = false, onNodeClick, onNodeHover }) => {
-  const svgRef = useRef5(null);
-  const { setRef, width, height } = useContainerSize();
-  const [collapsed, setCollapsed] = useState4(() => new Set(initialCollapsed ?? []));
-  const toggle = useCallback3((id) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
+  },
+  neighborhood: {
+    value: "neighborhood",
+    icon: "ph--tree-structure--regular",
+    label: "Neighborhood",
+    emitsHover: true,
+    // Tidy tree: the active node (passed as `focusId`) is the root, drawn on the left and vertically
+    // centred; the pre-traversed n-hop neighbourhood fans out to the right. No focus → plain ring.
+    createProjector: (ctx, { focusId, prev }) => new GraphTreeProjector(ctx, {
+      duration: TWEEN_MS,
+      focus: focusId,
+      nodeRadius: TREE_NODE_RADIUS,
+      rootRadius: TREE_ROOT_RADIUS
+    }, void 0, prev),
+    renderNode: (group, node) => {
+      const obj = node.data?.data?.object;
+      const isRoot = node.type === TREE_NODE_TYPE_ROOT;
+      const r = isRoot ? TREE_ROOT_RADIUS : TREE_NODE_RADIUS;
+      group.append("circle").attr("r", r).style("cursor", "pointer").style("fill", obj ? getNodeFillForObject(obj) : "var(--color-neutral-500)");
+      const text = labelForLeaf(node, obj);
+      if (text) {
+        const placement = isRoot ? "above" : node.type === TREE_NODE_TYPE_INBOUND ? "left" : "right";
+        appendTreeLabel(group, text, r, placement);
       }
-      return next;
-    });
-  }, []);
-  const handleClickRef = useRef5(() => {
-  });
-  handleClickRef.current = (node) => {
-    onNodeClick?.(node);
-    if (node.children?.length) {
-      toggle(node.id);
     }
-  };
-  const handleHoverRef = useRef5(() => {
+  }
+};
+var VARIANTS = [
+  "force",
+  "cluster",
+  "bundle",
+  "plexus",
+  "lattice",
+  "swarm"
+].map((id) => DEFINITIONS[id]);
+var getVariant = (value) => DEFINITIONS[value];
+var isVariant = (value) => VARIANTS.some((variant) => variant.value === value);
+
+// src/components/Visualization/Visualization.tsx
+var [VisualizationProvider, useVisualizationContext] = createContext("Visualization.Root");
+var VisualizationRoot = slottable(({ children, asChild, model, variant, focus, onSurfaceClick, ...props }, forwardedRef) => {
+  const { className, ...rest } = composableProps3(props, {
+    classNames: "dx-expander relative"
   });
-  handleHoverRef.current = (node, event) => onNodeHover?.(node, event);
-  const root = useMemo4(() => buildHierarchy(data, collapsed), [
-    data,
-    collapsed
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ React6.createElement(VisualizationProvider, {
+    model,
+    variant: getVariant(variant),
+    focus
+  }, /* @__PURE__ */ React6.createElement(Comp, {
+    ...rest,
+    className,
+    onClick: onSurfaceClick,
+    ref: forwardedRef
+  }, children));
+});
+VisualizationRoot.displayName = "Visualization.Root";
+var VisualizationGraph = ({ debug = false, onNodeHover }) => {
+  const { model, variant, focus } = useVisualizationContext("Visualization.Graph");
+  const svgRef = useRef4(null);
+  const [projector, setProjector] = useState3();
+  const projectorRef = useRef4(void 0);
+  projectorRef.current = projector;
+  const [clickFocusId, setClickFocusId] = useState3(void 0);
+  const focusId = focus ?? clickFocusId;
+  const lastLayoutRef = useRef4(void 0);
+  useEffect6(() => model?.subscribe(() => void 0), [
+    model
   ]);
-  useEffect8(() => {
-    if (!svgRef.current || !width || !height) {
-      return;
+  useEffect6(() => {
+    if (!variant.focusable) {
+      setClickFocusId(void 0);
     }
-    const radius = Math.max(0, Math.min(width, height) / 2 - padding);
-    renderRadialTree(svgRef.current, root, {
-      radius,
-      r,
-      label,
-      slots,
-      collapsed,
-      cluster: cluster2,
-      onNodeClick: (n) => handleClickRef.current(n),
-      onNodeHover: (n, e) => handleHoverRef.current(n, e)
-    });
   }, [
-    root,
-    width,
-    height,
-    r,
-    padding,
-    label,
-    slots,
-    collapsed,
-    cluster2
+    variant
   ]);
-  return /* @__PURE__ */ React7.createElement("div", {
-    ref: setRef,
-    className: mx2("dx-expander relative", classNames)
-  }, width > 0 && height > 0 && /* @__PURE__ */ React7.createElement("svg", {
-    ref: svgRef,
-    xmlns: "http://www.w3.org/2000/svg",
-    width,
-    height,
-    viewBox: `${-width / 2} ${-height / 2} ${width} ${height}`
-  }));
-};
-var renderRadialTree = (svgElement, root, options) => {
-  const { radius, r, label, slots, collapsed, cluster: cluster2, onNodeClick, onNodeHover } = options;
-  const svg = select3(svgElement);
-  const layout = cluster2 ? d3Cluster() : d3Tree();
-  layout.size([
-    2 * Math.PI,
-    radius
-  ]).separation((a, b) => (a.parent === b.parent ? 1 : 2) / Math.max(1, a.depth))(root);
-  const g = svg.selectAll("g.dx-radial-root").data([
-    null
-  ]).join("g").classed("dx-radial-root", true);
-  const linksLayer = g.selectAll("g.dx-radial-links").data([
-    null
-  ]).join("g").classed("dx-radial-links", true);
-  const nodesLayer = g.selectAll("g.dx-radial-nodes").data([
-    null
-  ]).join("g").classed("dx-radial-nodes", true);
-  const linkPath = linkRadial().angle((d) => d.x).radius((d) => d.y);
-  linksLayer.selectAll("path").data(root.links(), (d) => `${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_MS3).attr("opacity", 0).remove()).transition().duration(TRANSITION_MS3).attr("opacity", 1).attr("d", linkPath);
-  const node = nodesLayer.selectAll("g.dx-radial-node").data(root.descendants(), (d) => d.data.id);
-  const nodeEnter = node.enter().append("g").classed("dx-radial-node", true).attr("opacity", 0).attr("transform", (d) => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`).style("cursor", (d) => d.data.children?.length ? "pointer" : "default").on("click", (_, d) => onNodeClick(d.data));
-  nodeEnter.append("circle").attr("r", r).on("pointerenter", (event, d) => onNodeHover(d.data, event)).on("pointerleave", (event) => onNodeHover(null, event));
-  nodeEnter.append("text").attr("dy", "0.32em").attr("paint-order", "stroke").text((d) => label(d.data));
-  const nodeMerge = nodeEnter.merge(node);
-  nodeMerge.transition().duration(TRANSITION_MS3).attr("opacity", 1).attr("transform", (d) => `rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0)`);
-  nodeMerge.select("circle").attr("class", (d) => {
-    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).style("fill", (d) => isLeaf(d.data) ? getNodeFillForObject(d.data.data) : null);
-  nodeMerge.select("text").attr("class", slots.text ?? "").attr("transform", (d) => d.x >= Math.PI ? "rotate(180)" : null).attr("x", (d) => d.x < Math.PI === !d.children ? r + 4 : -(r + 4)).attr("text-anchor", (d) => d.x < Math.PI === !d.children ? "start" : "end").text((d) => label(d.data));
-  node.exit().transition().duration(TRANSITION_MS3).attr("opacity", 0).remove();
-};
-
-// src/components/Tree/layout/TidyTree.tsx
-import { curveBumpX, link as d3Link, select as select4, tree as d3Tree2 } from "d3";
-import React8, { useCallback as useCallback4, useEffect as useEffect9, useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
-import { mx as mx3 } from "@dxos/ui-theme";
-var TRANSITION_MS4 = 350;
-var TidyTree = ({ classNames, data, label = (d) => d.label ?? d.id, slots = defaultTreeLayoutSlots, r = 4, margin = 24, initialCollapsed, onNodeClick }) => {
-  const svgRef = useRef6(null);
-  const { setRef, width, height } = useContainerSize();
-  const [collapsed, setCollapsed] = useState5(() => new Set(initialCollapsed ?? []));
-  const toggle = useCallback4((id) => {
-    setCollapsed((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  }, []);
-  const handleClickRef = useRef6(() => {
-  });
-  handleClickRef.current = (node) => {
-    onNodeClick?.(node);
-    if (node.children?.length) {
-      toggle(node.id);
+  useEffect6(() => {
+    if (projectorRef.current?.layout) {
+      lastLayoutRef.current = projectorRef.current.layout;
     }
-  };
-  const root = useMemo5(() => buildHierarchy(data, collapsed), [
-    data,
-    collapsed
+    if (!svgRef.current) {
+      return;
+    }
+    setProjector(variant.createProjector(svgRef.current, {
+      focusId,
+      prev: lastLayoutRef.current
+    }));
+  }, [
+    variant,
+    focusId
   ]);
-  useEffect9(() => {
-    if (!svgRef.current || !width || !height) {
+  const handleSelect = useCallback3((node) => {
+    if (!variant.focusable || !node.data?.data?.object) {
       return;
     }
-    renderTidyTree(svgRef.current, root, {
-      width,
-      height,
-      r,
-      margin,
-      label,
-      slots,
-      collapsed,
-      onNodeClick: (n) => handleClickRef.current(n)
-    });
+    setClickFocusId((current) => current === node.id ? void 0 : node.id);
   }, [
-    root,
-    width,
-    height,
-    r,
-    margin,
-    label,
-    slots,
-    collapsed
+    variant
   ]);
-  return /* @__PURE__ */ React8.createElement("div", {
-    ref: setRef,
-    className: mx3("dx-expander relative", classNames)
-  }, width > 0 && height > 0 && /* @__PURE__ */ React8.createElement("svg", {
-    ref: svgRef,
-    xmlns: "http://www.w3.org/2000/svg",
-    width,
-    height,
-    viewBox: `${-width / 2} ${-height / 2} ${width} ${height}`
-  }));
-};
-var renderTidyTree = (svgElement, root, options) => {
-  const { width, height, r, margin, label, slots, collapsed, onNodeClick } = options;
-  const svg = select4(svgElement);
-  const dx = 18;
-  const dy = Math.max(60, (width - margin * 2) / Math.max(1, root.height + 1));
-  d3Tree2().nodeSize([
-    dx,
-    dy
-  ])(root);
-  let x0 = Infinity;
-  let x1 = -x0;
-  root.each((d) => {
-    if (d.x > x1) {
-      x1 = d.x;
+  const handlePointerMove = useCallback3((point) => {
+    if (projector instanceof GraphSwarmProjector2) {
+      projector.setCursor(point.x, point.y);
     }
-    if (d.x < x0) {
-      x0 = d.x;
+  }, [
+    projector
+  ]);
+  const handlePointerLeave = useCallback3(() => {
+    if (projector instanceof GraphSwarmProjector2) {
+      projector.setCursor(null);
     }
-  });
-  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;
-  const g = svg.selectAll("g.dx-tidy-root").data([
-    null
-  ]).join("g").classed("dx-tidy-root", true);
-  const linksLayer = g.selectAll("g.dx-tidy-links").data([
-    null
-  ]).join("g").classed("dx-tidy-links", true);
-  const nodesLayer = g.selectAll("g.dx-tidy-nodes").data([
-    null
-  ]).join("g").classed("dx-tidy-nodes", true);
-  const linkPath = d3Link(curveBumpX).x((d) => offsetX + d.y).y((d) => (d.x + offsetY) * scaleY);
-  linksLayer.selectAll("path").data(root.links(), (d) => `${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_MS4).attr("opacity", 0).remove()).transition().duration(TRANSITION_MS4).attr("opacity", 1).attr("d", linkPath);
-  const node = nodesLayer.selectAll("g.dx-tidy-node").data(root.descendants(), (d) => d.data.id);
-  const nodeEnter = node.enter().append("g").classed("dx-tidy-node", true).attr("transform", (d) => `translate(${offsetX + d.y},${(d.x + offsetY) * scaleY})`).attr("opacity", 0).style("cursor", (d) => d.data.children?.length ? "pointer" : "default").on("click", (_, d) => onNodeClick(d.data));
-  nodeEnter.append("circle").attr("r", r);
-  nodeEnter.append("text").attr("dy", "0.32em").attr("x", (d) => d.children ? -(r + 4) : r + 4).attr("text-anchor", (d) => d.children ? "end" : "start").text((d) => label(d.data));
-  const nodeMerge = nodeEnter.merge(node);
-  nodeMerge.transition().duration(TRANSITION_MS4).attr("opacity", 1).attr("transform", (d) => `translate(${offsetX + d.y},${(d.x + offsetY) * scaleY})`);
-  nodeMerge.select("circle").attr("class", (d) => {
-    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("text").attr("class", slots.text ?? "").attr("x", (d) => d.children ? -(r + 4) : r + 4).attr("text-anchor", (d) => d.children ? "end" : "start").text((d) => label(d.data));
-  node.exit().each(function() {
-    select4(this).interrupt();
-  }).transition().duration(TRANSITION_MS4).attr("opacity", 0).remove();
-};
-
-// src/components/Tree/Tree.tsx
-var Tree = ({ classNames, data, edges, variant = "tidy", label, slots, initialCollapsed, onNodeClick, onNodeHover }) => {
-  return useMemo6(() => {
-    switch (variant) {
-      case "tidy":
-        return /* @__PURE__ */ React9.createElement(TidyTree, {
-          classNames,
-          data,
-          label,
-          slots,
-          initialCollapsed,
-          onNodeClick
-        });
-      case "radial":
-        return /* @__PURE__ */ React9.createElement(RadialTree, {
-          classNames,
-          data,
-          label,
-          slots,
-          initialCollapsed,
-          onNodeClick,
-          onNodeHover
-        });
-      case "edge":
-        return /* @__PURE__ */ React9.createElement(HierarchicalEdgeBundling, {
-          classNames,
-          data,
-          edges: edges ?? [],
-          label,
-          slots,
-          onNodeHover
-        });
+  }, [
+    projector
+  ]);
+  const handleInspect = useCallback3((node, event) => {
+    if (!variant.emitsHover) {
+      return;
     }
+    onNodeHover?.(node ? {
+      id: node.id,
+      data: node.data?.data?.object
+    } : null, event);
   }, [
     variant,
-    classNames,
-    data,
-    edges,
-    label,
-    slots,
-    initialCollapsed,
-    onNodeClick,
     onNodeHover
   ]);
+  const pointerProps = variant.trackPointer ? {
+    onPointerMove: handlePointerMove,
+    onPointerLeave: handlePointerLeave
+  } : void 0;
+  return /* @__PURE__ */ React6.createElement(SVG2.Root, {
+    ref: svgRef
+  }, /* @__PURE__ */ React6.createElement(SVG2.Zoom, {
+    extent: [
+      1 / 2,
+      2
+    ]
+  }, projector && /* @__PURE__ */ React6.createElement(SVG2.Graph, {
+    model,
+    projector,
+    renderNode: variant.renderNode,
+    applyNode: variant.applyNode,
+    edgeOpacity: variant.edgeOpacity,
+    drag: variant.drag,
+    highlightOnHover: variant.highlightOnHover,
+    onSelect: handleSelect,
+    onInspect: handleInspect,
+    ...pointerProps
+  })), debug && /* @__PURE__ */ React6.createElement(SVG2.FPS, null));
+};
+VisualizationGraph.displayName = "Visualization.Graph";
+var Visualization = {
+  Root: VisualizationRoot,
+  Graph: VisualizationGraph
 };
 export {
   CanvasForceGraph,
   Chart,
   ForceGraph,
   Globe,
-  HierarchicalEdgeBundling,
   Lattice,
-  RadialTree,
-  TidyTree,
   Tree,
-  buildHierarchy,
-  defaultTreeLayoutSlots,
-  isCollapsed,
-  isLeaf,
+  TreeNodeType,
+  TreeType,
+  VARIANTS,
+  Visualization,
+  getVariant,
+  isVariant,
   treeTypeToTreeNode
 };
 //# sourceMappingURL=index.mjs.map