polly-graph 0.1.3 → 0.1.5

package/dist/index.js

@@ -3608,104 +3608,45 @@ function manyBody_default() {
   return force;
 }
 
-// node_modules/d3-force/src/x.js
-function x_default2(x3) {
-  var strength = constant_default5(0.1), nodes, strengths, xz;
-  if (typeof x3 !== "function") x3 = constant_default5(x3 == null ? 0 : +x3);
-  function force(alpha) {
-    for (var i = 0, n = nodes.length, node; i < n; ++i) {
-      node = nodes[i], node.vx += (xz[i] - node.x) * strengths[i] * alpha;
-    }
-  }
-  function initialize() {
-    if (!nodes) return;
-    var i, n = nodes.length;
-    strengths = new Array(n);
-    xz = new Array(n);
-    for (i = 0; i < n; ++i) {
-      strengths[i] = isNaN(xz[i] = +x3(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
-    }
-  }
-  force.initialize = function(_) {
-    nodes = _;
-    initialize();
-  };
-  force.strength = function(_) {
-    return arguments.length ? (strength = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : strength;
-  };
-  force.x = function(_) {
-    return arguments.length ? (x3 = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : x3;
-  };
-  return force;
-}
-
-// node_modules/d3-force/src/y.js
-function y_default2(y3) {
-  var strength = constant_default5(0.1), nodes, strengths, yz;
-  if (typeof y3 !== "function") y3 = constant_default5(y3 == null ? 0 : +y3);
-  function force(alpha) {
-    for (var i = 0, n = nodes.length, node; i < n; ++i) {
-      node = nodes[i], node.vy += (yz[i] - node.y) * strengths[i] * alpha;
-    }
-  }
-  function initialize() {
-    if (!nodes) return;
-    var i, n = nodes.length;
-    strengths = new Array(n);
-    yz = new Array(n);
-    for (i = 0; i < n; ++i) {
-      strengths[i] = isNaN(yz[i] = +y3(nodes[i], i, nodes)) ? 0 : +strength(nodes[i], i, nodes);
-    }
-  }
-  force.initialize = function(_) {
-    nodes = _;
-    initialize();
-  };
-  force.strength = function(_) {
-    return arguments.length ? (strength = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : strength;
-  };
-  force.y = function(_) {
-    return arguments.length ? (y3 = typeof _ === "function" ? _ : constant_default5(+_), initialize(), force) : y3;
-  };
-  return force;
-}
-
 // src/core/create-graph-layers.ts
-function createGraphLayers(svg) {
-  while (svg.firstChild) {
-    svg.removeChild(svg.firstChild);
-  }
-  const createGroup = (className) => {
+function createGraphLayers(host) {
+  host.innerHTML = "";
+  const rootContainer = document.createElement("div");
+  rootContainer.className = "pg-root";
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "pg-canvas");
+  const overlay = document.createElement("div");
+  overlay.className = "pg-overlay";
+  rootContainer.appendChild(svg);
+  rootContainer.appendChild(overlay);
+  host.appendChild(rootContainer);
+  const createGroup = (layerName) => {
     const group = document.createElementNS("http://www.w3.org/2000/svg", "g");
-    group.setAttribute("class", className);
-    group.setAttribute("data-layer", className);
+    group.setAttribute("class", `pg-layer-${layerName}`);
+    group.setAttribute("data-layer", layerName);
     return group;
   };
   const interactionLayer = createGroup("interaction-layer");
   const interactionRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  const interactionAttributes = {
-    class: "interaction-surface",
-    width: "100%",
-    height: "100%",
-    fill: "transparent",
-    "pointer-events": "all"
-  };
-  Object.entries(interactionAttributes).forEach(([key, value]) => {
-    interactionRect.setAttribute(key, value);
-  });
+  interactionRect.setAttribute("class", "pg-interaction-surface");
+  interactionRect.setAttribute("fill", "transparent");
+  interactionRect.setAttribute("pointer-events", "all");
   interactionLayer.appendChild(interactionRect);
-  const root2 = createGroup("knowledge-graph-root");
+  const graphRoot = createGroup("viewport");
   const layers = {
+    svg,
+    overlay,
     interactionLayer,
     interactionRect,
-    root: root2,
+    root: graphRoot,
+    // These keys now match your ctx.root.select('[data-layer="..."]') calls
     links: createGroup("links"),
     linkLabels: createGroup("link-labels"),
     nodeRings: createGroup("node-rings"),
     nodes: createGroup("nodes"),
     nodeLabels: createGroup("node-labels")
   };
-  root2.append(
+  graphRoot.append(
     layers.links,
     layers.linkLabels,
     layers.nodeRings,
@@ -3713,7 +3654,7 @@ function createGraphLayers(svg) {
     layers.nodeLabels
   );
   svg.appendChild(interactionLayer);
-  svg.appendChild(root2);
+  svg.appendChild(graphRoot);
   return layers;
 }
 
@@ -3775,10 +3716,17 @@ function createGraphSimulation(config) {
   });
   const simulation = simulation_default(config.nodes).alpha(0.9).alphaDecay(0.12).alphaMin(0.03).velocityDecay(0.5).force(
     "link",
-    link_default(config.links).id((d) => d.id).distance(150).strength(0.4)
+    link_default(config.links).id((d) => d.id).distance((d) => {
+      const source = d.source;
+      const target = d.target;
+      const sourceR = source.style?.radius || 20;
+      const targetR = target.style?.radius || 20;
+      const labelBuffer = d.style?.label?.height || 40;
+      return (sourceR + targetR + labelBuffer) * 2;
+    }).strength(0.8)
   ).force("charge", manyBody_default().strength(-220)).force(
     "collide",
-    collide_default().radius((node) => (node.style?.radius ?? 12) + 10).strength(0.9)
+    collide_default().radius((node) => (node.style?.radius ?? 12) + 10).iterations(2)
   ).force("center", center_default(centerX, centerY).strength(0.08));
   return { simulation };
 }
@@ -3830,49 +3778,51 @@ function getControlIcon(icon) {
 }
 
 // src/controls/create-graph-controls.ts
-function createGraphControls(container, graph, config) {
+function createGraphControls(overlay, graph, config) {
   let root2 = null;
   function mount() {
     if (!config.enabled) {
       return;
     }
-    const parent = container.parentElement;
-    if (!parent) {
-      return;
-    }
     root2 = document.createElement("div");
     root2.className = "pg-controls";
-    applyPosition(root2, config);
-    applyOrientation(root2, config);
+    const position = resolveControlsPosition(config.position);
+    root2.classList.add(`pg-pos-${position}`);
+    const orientation = resolveControlsOrientation(config.orientation);
+    root2.classList.add(`pg-orient-${orientation}`);
+    if (config.offset) {
+      root2.style.setProperty("--pg-controls-offset-x", `${config.offset.x}px`);
+      root2.style.setProperty("--pg-controls-offset-y", `${config.offset.y}px`);
+    }
     appendControls(root2, config, graph);
-    parent.appendChild(root2);
+    overlay.appendChild(root2);
   }
   function appendControls(root3, config2, graph2) {
-    if (shouldRenderControl(config2, "zoomIn")) {
-      root3.appendChild(createButton("zoom-in", "Zoom in", graph2.zoomIn.bind(graph2)));
-    }
-    if (shouldRenderControl(config2, "zoomOut")) {
-      root3.appendChild(createButton("zoom-out", "Zoom out", graph2.zoomOut.bind(graph2)));
-    }
-    if (shouldRenderControl(config2, "fit")) {
-      root3.appendChild(createButton("fit", "Fit view", graph2.fitView.bind(graph2)));
-    }
-    if (shouldRenderControl(config2, "reset")) {
-      root3.appendChild(createButton("reset", "Reset view", graph2.resetView.bind(graph2)));
-    }
+    const actions = [
+      { key: "zoomIn", icon: "zoom-in", label: "Zoom in", fn: graph2.zoomIn.bind(graph2) },
+      { key: "zoomOut", icon: "zoom-out", label: "Zoom out", fn: graph2.zoomOut.bind(graph2) },
+      { key: "fit", icon: "fit", label: "Fit view", fn: graph2.fitView.bind(graph2) },
+      { key: "reset", icon: "reset", label: "Reset view", fn: graph2.resetView.bind(graph2) }
+    ];
+    actions.forEach((action) => {
+      if (shouldRenderControl(config2, action.key)) {
+        root3.appendChild(createButton(action.icon, action.label, action.fn));
+      }
+    });
   }
   function createButton(type, label, onClick) {
     const button = document.createElement("button");
+    button.className = "pg-control-btn";
     button.type = "button";
     button.setAttribute("aria-label", label);
     const wrapper = document.createElement("div");
+    wrapper.className = "pg-icon-wrapper";
     wrapper.innerHTML = getControlIcon(type);
     const svg = wrapper.querySelector("svg");
-    if (!svg) {
-      throw new Error(`Invalid SVG for icon: ${type}`);
+    if (svg) {
+      svg.classList.add("pg-icon");
+      button.appendChild(svg);
     }
-    svg.classList.add("pg-icon");
-    button.appendChild(svg);
     button.addEventListener("click", onClick);
     return button;
   }
@@ -3880,39 +3830,70 @@ function createGraphControls(container, graph, config) {
     if (!root2) {
       return;
     }
-    const clone = root2.cloneNode(true);
-    root2.replaceWith(clone);
+    if (root2.parentNode === overlay) {
+      overlay.removeChild(root2);
+    }
     root2 = null;
   }
   return { mount, destroy };
 }
-function applyPosition(el, config) {
-  const position = resolveControlsPosition(config.position);
-  const offset = config.offset ?? { x: 16, y: 16 };
-  el.style.position = "absolute";
-  switch (position) {
-    case "bottom-left":
-      el.style.left = `${offset.x}px`;
-      el.style.bottom = `${offset.y}px`;
-      break;
-    case "bottom-right":
-      el.style.right = `${offset.x}px`;
-      el.style.bottom = `${offset.y}px`;
-      break;
-    case "top-left":
-      el.style.left = `${offset.x}px`;
-      el.style.top = `${offset.y}px`;
-      break;
-    case "top-right":
-      el.style.right = `${offset.x}px`;
-      el.style.top = `${offset.y}px`;
-      break;
+
+// src/assets/caret.svg?raw
+var caret_default = '<svg\n  xmlns="http://www.w3.org/2000/svg"\n  viewBox="0 0 24 24"\n  fill="none"\n  stroke="currentColor"\n  stroke-width="2"\n  stroke-linecap="round"\n  stroke-linejoin="round"\n>\n  <path d="M9 20L16.5 12L9 4" />\n</svg>';
+
+// src/legends/graph-legend-icon.ts
+var LEGEND_ICON_MAP = { caret: caret_default };
+function getLegendIcon(icon) {
+  const raw = LEGEND_ICON_MAP[icon];
+  if (!raw) {
+    throw new Error(`Legend icon not found: ${icon}`);
   }
+  return raw.replace("<svg", '<svg class="pg-icon"');
 }
-function applyOrientation(el, config) {
-  const orientation = resolveControlsOrientation(config.orientation);
-  el.style.display = "flex";
-  el.style.flexDirection = orientation === "vertical" ? "column" : "row";
+
+// src/legends/create-graph-legends.ts
+function createGraphLegend(overlay, config) {
+  const legendWrapper = document.createElement("div");
+  legendWrapper.className = "pg-legend";
+  const position = config.position || "bottom-right";
+  legendWrapper.classList.add(`pg-pos-${position}`);
+  if (config.defaultExpanded === false) {
+    legendWrapper.classList.add("pg-is-collapsed");
+  }
+  if (config.collapsible) {
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "pg-legend-toggle";
+    toggleBtn.type = "button";
+    toggleBtn.innerHTML = getLegendIcon("caret");
+    toggleBtn.onclick = (e) => {
+      e.stopPropagation();
+      legendWrapper.classList.toggle("pg-is-collapsed");
+    };
+    legendWrapper.appendChild(toggleBtn);
+  }
+  const body = document.createElement("div");
+  body.className = "pg-legend-body";
+  const list = document.createElement("ul");
+  list.className = "pg-legend-list";
+  config.items.forEach((item) => {
+    const listItem = document.createElement("li");
+    listItem.className = "pg-legend-item";
+    const swatch = document.createElement("span");
+    swatch.className = `pg-legend-swatch is-${item.shape || "circle"}`;
+    swatch.style.backgroundColor = item.color;
+    const label = document.createElement("span");
+    label.className = "pg-legend-label";
+    label.innerText = item.label;
+    listItem.appendChild(swatch);
+    listItem.appendChild(label);
+    list.appendChild(listItem);
+  });
+  body.appendChild(list);
+  legendWrapper.appendChild(body);
+  overlay.appendChild(legendWrapper);
+  return () => {
+    if (legendWrapper.parentNode === overlay) overlay.removeChild(legendWrapper);
+  };
 }
 
 // src/utils/resolve-link-style.ts
@@ -3928,6 +3909,7 @@ var DEFAULT_LINK_STYLE = {
   },
   label: {
     enabled: true,
+    visibility: "always",
     backgroundFill: "color-mix(in srgb, #8E42EE, #FFFFFF 90%)",
     borderColor: "color-mix(in srgb, #8E42EE, #FFFFFF 10%)",
     borderWidth: 1.5,
@@ -3963,6 +3945,7 @@ function mergeLinkStyle(base, override) {
     },
     label: {
       enabled: override?.label?.enabled ?? base.label.enabled,
+      visibility: override?.label?.visibility ?? base.label.visibility,
       backgroundFill: override?.label?.backgroundFill ?? base.label.backgroundFill,
       borderColor: override?.label?.borderColor ?? base.label.borderColor,
       borderWidth: override?.label?.borderWidth ?? base.label.borderWidth,
@@ -4063,7 +4046,14 @@ function getLinkKey(link) {
 }
 function renderLinks(ctx, links) {
   const renderableLinks = createRenderableLinks(ctx, links);
-  return ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd);
+  const linkSelection = ctx.root.select('[data-layer="links"]').selectAll("line").data(renderableLinks, (item) => getLinkKey(item.link)).join("line").attr("class", "graph-link").attr("stroke", (item) => item.style.stroke).attr("stroke-width", (item) => item.style.strokeWidth).attr("opacity", (item) => item.style.opacity).attr("marker-end", (item) => item.markerEnd).style("pointer-events", "stroke");
+  const labelSelection = ctx.root.selectAll(".link-label");
+  linkSelection.on("mouseenter.label-hover", (_event, d) => {
+    labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 1);
+  }).on("mouseleave.label-hover", (_event, d) => {
+    labelSelection.filter((labelItem) => labelItem.link === d.link && labelItem.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0);
+  });
+  return linkSelection;
 }
 
 // src/renderer/nodes.ts
@@ -4133,7 +4123,10 @@ function renderNodeLabels(ctx, nodes) {
 // src/renderer/link-labels.ts
 function createRenderableLinks2(params, links) {
   return links.map(
-    (link) => ({ link, style: resolveLinkStyle({ link, interaction: params.interaction }) })
+    (link) => ({
+      link,
+      style: resolveLinkStyle({ link, interaction: params.interaction })
+    })
   ).filter(
     (item) => item.style.label.enabled && Boolean(item.link.label)
   );
@@ -4145,7 +4138,13 @@ function getLinkKey2(link) {
 }
 function renderLinkLabels(params, links) {
   const renderableLinks = createRenderableLinks2(params, links);
-  const labelSelection = params.root.select(".link-labels").selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").attr("pointer-events", "auto").attr("cursor", "pointer");
+  const labelSelection = params.root.select('[data-layer="link-labels"]').selectAll(".link-label").data(renderableLinks, (item) => getLinkKey2(item.link)).join("g").attr("class", "link-label").style("opacity", (item) => {
+    const visibility = item.style.label.visibility ?? "always";
+    return visibility === "always" ? 1 : 0;
+  }).style("pointer-events", (item) => {
+    const visibility = item.style.label.visibility ?? "always";
+    return visibility === "always" ? "auto" : "none";
+  }).style("cursor", "pointer");
   labelSelection.selectAll("rect").data((item) => [item]).join("rect").attr("rx", (item) => item.style.label.borderRadius).attr("ry", (item) => item.style.label.borderRadius).attr("height", (item) => item.style.label.height).attr("fill", (item) => item.style.label.backgroundFill).attr("stroke", (item) => item.style.label.borderColor).attr("stroke-width", (item) => item.style.label.borderWidth);
   labelSelection.selectAll("text").data((item) => [item]).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", (item) => item.style.label.fontSize).attr("fill", (item) => item.style.label.textColor).text((item) => item.link.label ?? "");
   return labelSelection;
@@ -4174,58 +4173,35 @@ function createDragBehavior(simulation) {
 
 // src/interactions/create-node-hover.ts
 function createNodeHover(nodeSelection, hoverStyle) {
-  if (!hoverStyle) {
-    return;
-  }
-  nodeSelection.on(
-    "mouseenter.hover",
-    function(_event, node) {
+  const firstNode = nodeSelection.node();
+  if (!firstNode) return;
+  if (hoverStyle) {
+    nodeSelection.on("mouseenter.hover", function(_event, node) {
       const circle = this;
-      const hoverStroke = hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff";
-      const hoverStrokeWidth = hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5;
-      const hoverOpacity = hoverStyle.opacity ?? node.style?.opacity ?? 1;
-      circle.setAttribute(
-        "stroke",
-        hoverStroke
-      );
-      circle.setAttribute(
-        "stroke-width",
-        String(
-          hoverStrokeWidth
-        )
-      );
-      circle.setAttribute(
-        "opacity",
-        String(
-          hoverOpacity
-        )
-      );
-    }
-  ).on(
-    "mouseleave.hover",
-    function(_event, node) {
+      circle.setAttribute("stroke", hoverStyle.stroke ?? node.style?.stroke ?? "#ffffff");
+      circle.setAttribute("stroke-width", String(hoverStyle.strokeWidth ?? node.style?.strokeWidth ?? 1.5));
+      circle.setAttribute("opacity", String(hoverStyle.opacity ?? node.style?.opacity ?? 1));
+    }).on("mouseleave.hover", function(_event, node) {
       const circle = this;
-      const defaultStroke = node.style?.stroke ?? "#ffffff";
-      const defaultStrokeWidth = node.style?.strokeWidth ?? 1.5;
-      const defaultOpacity = node.style?.opacity ?? 1;
-      circle.setAttribute(
-        "stroke",
-        defaultStroke
-      );
-      circle.setAttribute(
-        "stroke-width",
-        String(
-          defaultStrokeWidth
-        )
-      );
-      circle.setAttribute(
-        "opacity",
-        String(
-          defaultOpacity
-        )
-      );
-    }
-  );
+      circle.setAttribute("stroke", node.style?.stroke ?? "#ffffff");
+      circle.setAttribute("stroke-width", String(node.style?.strokeWidth ?? 1.5));
+      circle.setAttribute("opacity", String(node.style?.opacity ?? 1));
+    });
+  }
+  const svgElement = firstNode.ownerSVGElement;
+  if (!svgElement) return;
+  const root2 = select_default2(svgElement);
+  const labelSelection = root2.selectAll(".link-label");
+  nodeSelection.on("mouseenter.labels", (_event, d) => {
+    labelSelection.filter((item) => {
+      if (item.style.label.visibility !== "hover") return false;
+      const s = item.link.source;
+      const t = item.link.target;
+      return s.id === d.id || t.id === d.id;
+    }).interrupt().transition().duration(200).style("opacity", 1).style("pointer-events", "auto");
+  }).on("mouseleave.labels", (_event) => {
+    labelSelection.filter((item) => item.style.label.visibility === "hover").interrupt().transition().duration(200).style("opacity", 0).style("pointer-events", "none");
+  });
 }
 
 // src/utils/resolve-tooltip-position.ts
@@ -4430,10 +4406,11 @@ function observeResize(element, onResize) {
       if (!entry) {
         return;
       }
-      onResize(
-        entry.contentRect.width,
-        entry.contentRect.height
-      );
+      const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+      const height = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+      if (width > 0 && height > 0) {
+        onResize(width, height);
+      }
     }
   );
   observer.observe(element);
@@ -4466,54 +4443,94 @@ function getLinkTargetPoint(link) {
   };
 }
 
+// src/utils/export-graph.ts
+import html2canvas from "html2canvas";
+async function captureAndDownloadGraph(container, options = {}) {
+  const {
+    fileName = `graph-export-${Date.now()}.png`,
+    backgroundColor = "#ffffff",
+    pixelRatio = 2
+  } = options;
+  const root2 = container.querySelector(".pg-root");
+  if (!root2) return;
+  const controls = root2.querySelector(".pg-controls");
+  const legendToggle = root2.querySelector(".pg-legend-toggle");
+  const interactionLayer = root2.querySelector(".pg-interaction-layer");
+  const legend = root2.querySelector(".pg-legend");
+  const wasCollapsed = legend?.classList.contains("pg-is-collapsed");
+  if (controls) controls.style.display = "none";
+  if (legendToggle) legendToggle.style.display = "none";
+  if (interactionLayer) interactionLayer.style.display = "none";
+  if (legend && wasCollapsed) {
+    legend.classList.remove("pg-is-collapsed");
+  }
+  try {
+    const canvas = await html2canvas(root2, {
+      scale: pixelRatio,
+      backgroundColor,
+      useCORS: true,
+      logging: false
+    });
+    const dataUrl = canvas.toDataURL("image/png");
+    const link = document.createElement("a");
+    link.download = fileName;
+    link.href = dataUrl;
+    link.click();
+  } finally {
+    if (controls) controls.style.display = "flex";
+    if (legendToggle) legendToggle.style.display = "flex";
+    if (interactionLayer) interactionLayer.style.display = "block";
+    if (legend && wasCollapsed) {
+      legend.classList.add("pg-is-collapsed");
+    }
+  }
+}
+
 // src/create-graph.ts
 function createGraph(config) {
   let cleanupResize = null;
   let cleanupZoom = null;
   let tooltipBinding = null;
   let controls = null;
+  let legendCleanup = null;
+  let fitViewTimer = null;
   let dimensions = { width: 0, height: 0 };
   let rootGroup = null;
+  let svgElement = null;
   let zoomBehavior = null;
   let simulation = null;
   function render() {
     destroy();
     const layers = createGraphLayers(config.container);
+    svgElement = layers.svg;
     rootGroup = layers.root;
-    cleanupResize = observeResize(
-      config.container,
-      (width, height) => {
-        dimensions = { width, height };
-        layers.interactionRect.setAttribute("width", String(width));
-        layers.interactionRect.setAttribute("height", String(height));
-        simulation?.force("x", x_default2(width / 2).strength(0.03));
-        simulation?.force("y", y_default2(height / 2).strength(0.03));
-        simulation?.alpha(0.25).restart();
+    cleanupResize = observeResize(config.container, (width, height) => {
+      dimensions = { width, height };
+      layers.svg.setAttribute("width", String(width));
+      layers.svg.setAttribute("height", String(height));
+      layers.interactionRect.setAttribute("width", String(width));
+      layers.interactionRect.setAttribute("height", String(height));
+      if (simulation) {
+        simulation.force("center", center_default(width / 2, height / 2));
+        simulation.alpha(0.3).restart();
       }
-    );
+      if (fitViewTimer) {
+        clearTimeout(fitViewTimer);
+      }
+      fitViewTimer = setTimeout(() => {
+        fitView();
+        fitViewTimer = null;
+      }, 150);
+    });
     const zoomResult = createZoom({
-      /**
-       * D3 zoom must be attached to SVG
-       * because it requires:
-       *
-       * width.baseVal
-       * height.baseVal
-       */
-      svg: config.container,
-      /**
-       * Used for pointer semantics /
-       * pan filtering only
-       */
+      svg: layers.svg,
       interactionLayer: layers.interactionLayer,
-      /**
-       * Actual graph transform target
-       */
       root: layers.root
     });
     zoomBehavior = zoomResult.behavior;
     cleanupZoom = zoomResult.cleanup;
     const root2 = select_default2(layers.root);
-    const renderContext = { svg: config.container, root: root2, interaction: config.interaction };
+    const renderContext = { svg: layers.svg, root: root2, interaction: config.interaction };
     const linkSelection = renderLinks(renderContext, config.links);
     const linkLabelSelection = renderLinkLabels(renderContext, config.links);
     const nodeSelection = renderNodes(renderContext, config.nodes);
@@ -4521,45 +4538,41 @@ function createGraph(config) {
     const simulationConfig = {
       nodes: config.nodes,
       links: config.links,
-      width: config.container.clientWidth,
-      height: config.container.clientHeight
+      // Uses the observed dimensions to ensure physics are calculated on actual container size
+      width: dimensions.width || config.container.clientWidth,
+      height: dimensions.height || config.container.clientHeight
     };
     const simulationResult = createGraphSimulation(simulationConfig);
     simulation = simulationResult.simulation;
-    simulation.on(
-      "tick",
-      () => {
-        linkSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => getShortenedTargetPoint(item.link, item.style).x).attr("y2", (item) => getShortenedTargetPoint(item.link, item.style).y);
-        linkLabelSelection.attr("transform", (item) => {
-          const link = item.link;
-          const source = link.source;
-          const targetPoint = getLinkTargetPoint(link);
-          const x3 = ((source.x ?? 0) + targetPoint.x) / 2;
-          const y3 = ((source.y ?? 0) + targetPoint.y) / 2;
-          return `translate(${x3}, ${y3})`;
-        }).each(function() {
-          const group = this;
-          const text = group.querySelector("text");
-          const rect = group.querySelector("rect");
-          if (!text || !rect) {
-            return;
-          }
-          const bBox = text.getBBox();
-          const padding = 6;
-          rect.setAttribute("x", String(bBox.x - padding));
-          rect.setAttribute("y", String(bBox.y - padding));
-          rect.setAttribute("width", String(bBox.width + padding * 2));
-          rect.setAttribute("height", String(bBox.height + padding * 2));
-        });
-        nodeSelection.attr("cx", (d) => d.x ?? 0).attr("cy", (d) => d.y ?? 0);
-        labelSelection.attr("x", (d) => d.x ?? 0).attr("y", (d) => d.y ?? 0);
-        tooltipBinding?.reposition();
-      }
-    );
+    simulation.on("tick", () => {
+      linkSelection.attr("x1", (item) => item.link.source.x ?? 0).attr("y1", (item) => item.link.source.y ?? 0).attr("x2", (item) => getShortenedTargetPoint(item.link, item.style).x).attr("y2", (item) => getShortenedTargetPoint(item.link, item.style).y);
+      linkLabelSelection.attr("transform", (item) => {
+        const link = item.link;
+        const source = link.source;
+        const targetPoint = getLinkTargetPoint(link);
+        const x3 = ((source.x ?? 0) + targetPoint.x) / 2;
+        const y3 = ((source.y ?? 0) + targetPoint.y) / 2;
+        return `translate(${x3}, ${y3})`;
+      }).each(function() {
+        const group = this;
+        const text = group.querySelector("text");
+        const rect = group.querySelector("rect");
+        if (!text || !rect) return;
+        const bBox = text.getBBox();
+        const padding = 6;
+        rect.setAttribute("x", String(bBox.x - padding));
+        rect.setAttribute("y", String(bBox.y - padding));
+        rect.setAttribute("width", String(bBox.width + padding * 2));
+        rect.setAttribute("height", String(bBox.height + padding * 2));
+      });
+      nodeSelection.attr("cx", (d) => d.x ?? 0).attr("cy", (d) => d.y ?? 0);
+      labelSelection.attr("x", (d) => d.x ?? 0).attr("y", (d) => d.y ?? 0);
+      tooltipBinding?.reposition();
+    });
     if (config.interaction?.hover?.enabled) {
       if (config.interaction?.hover?.tooltip?.enabled) {
         tooltipBinding = bindNodeTooltip({
-          container: config.container.parentElement,
+          container: config.container,
           selection: nodeSelection,
           tooltipConfig: config.interaction.hover.tooltip
         });
@@ -4569,66 +4582,53 @@ function createGraph(config) {
     if (config.interaction?.drag?.enabled !== false) {
       nodeSelection.call(createDragBehavior(simulation));
     }
-    if (config.interaction?.selection?.enabled) {
-    }
     if (config.controls?.enabled) {
-      controls = createGraphControls(config.container, { zoomIn, zoomOut, resetView, fitView, destroy, render }, config.controls);
+      controls = createGraphControls(
+        layers.overlay,
+        { zoomIn, zoomOut, resetView, fitView, destroy, render, exportGraph },
+        config.controls
+      );
       controls.mount();
     }
+    if (config.legend?.enabled) {
+      legendCleanup = createGraphLegend(layers.overlay, config.legend);
+    }
   }
   function resetView() {
-    if (!zoomBehavior) {
-      return;
-    }
-    select_default2(config.container).transition().call(
-      zoomBehavior.transform,
-      identity2
-    );
+    if (!zoomBehavior || !svgElement) return;
+    select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, identity2);
   }
   function fitView() {
-    if (!zoomBehavior || !rootGroup || dimensions.width === 0 || dimensions.height === 0) {
-      return;
-    }
+    if (!zoomBehavior || !rootGroup || !svgElement || dimensions.width === 0 || dimensions.height === 0) return;
     const bounds = rootGroup.getBBox();
-    if (bounds.width === 0 || bounds.height === 0) {
-      return;
-    }
-    const width = dimensions.width;
-    const height = dimensions.height;
-    const scale = Math.min(
-      width / bounds.width,
-      height / bounds.height
-    ) * 0.9;
-    const translateX = (width - bounds.width * scale) / 2 - bounds.x * scale;
-    const translateY = (height - bounds.height * scale) / 2 - bounds.y * scale;
-    const transform2 = identity2.translate(
-      translateX,
-      translateY
-    ).scale(scale);
-    select_default2(config.container).transition().call(
-      zoomBehavior.transform,
-      transform2
-    );
+    if (bounds.width === 0 || bounds.height === 0) return;
+    const scale = Math.min(dimensions.width / bounds.width, dimensions.height / bounds.height) * 0.9;
+    const translateX = (dimensions.width - bounds.width * scale) / 2 - bounds.x * scale;
+    const translateY = (dimensions.height - bounds.height * scale) / 2 - bounds.y * scale;
+    const transform2 = identity2.translate(translateX, translateY).scale(scale);
+    select_default2(svgElement).transition().duration(400).call(zoomBehavior.transform, transform2);
   }
   function zoomIn() {
-    if (!zoomBehavior) {
-      return;
-    }
-    select_default2(config.container).transition().call(
-      zoomBehavior.scaleBy,
-      1.2
-    );
+    if (!zoomBehavior || !svgElement) return;
+    select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 1.2);
   }
   function zoomOut() {
-    if (!zoomBehavior) {
-      return;
-    }
-    select_default2(config.container).transition().call(
-      zoomBehavior.scaleBy,
-      0.8
-    );
+    if (!zoomBehavior || !svgElement) return;
+    select_default2(svgElement).transition().call(zoomBehavior.scaleBy, 0.8);
+  }
+  async function exportGraph(fileName) {
+    fitView();
+    await new Promise((resolve) => setTimeout(resolve, 500));
+    await captureAndDownloadGraph(config.container, {
+      fileName,
+      pixelRatio: 2
+    });
   }
   function destroy() {
+    if (fitViewTimer) {
+      clearTimeout(fitViewTimer);
+      fitViewTimer = null;
+    }
     if (cleanupResize) {
       cleanupResize();
       cleanupResize = null;
@@ -4649,13 +4649,18 @@ function createGraph(config) {
       controls.destroy();
       controls = null;
     }
+    if (legendCleanup) {
+      legendCleanup();
+      legendCleanup = null;
+    }
     rootGroup = null;
+    svgElement = null;
     zoomBehavior = null;
     while (config.container.firstChild) {
       config.container.removeChild(config.container.firstChild);
     }
   }
-  return { render, zoomIn, zoomOut, resetView, fitView, destroy };
+  return { render, zoomIn, zoomOut, resetView, fitView, destroy, exportGraph };
 }
 export {
   createGraph