polly-graph 0.1.8 → 0.1.9

package/dist/index.cjs

@@ -2662,15 +2662,15 @@ function defaultWheelDelta(event) {
 function defaultTouchable2() {
   return navigator.maxTouchPoints || "ontouchstart" in this;
 }
-function defaultConstrain(transform2, extent2, translateExtent) {
-  var dx0 = transform2.invertX(extent2[0][0]) - translateExtent[0][0], dx1 = transform2.invertX(extent2[1][0]) - translateExtent[1][0], dy0 = transform2.invertY(extent2[0][1]) - translateExtent[0][1], dy1 = transform2.invertY(extent2[1][1]) - translateExtent[1][1];
+function defaultConstrain(transform2, extent, translateExtent) {
+  var dx0 = transform2.invertX(extent[0][0]) - translateExtent[0][0], dx1 = transform2.invertX(extent[1][0]) - translateExtent[1][0], dy0 = transform2.invertY(extent[0][1]) - translateExtent[0][1], dy1 = transform2.invertY(extent[1][1]) - translateExtent[1][1];
   return transform2.translate(
     dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
     dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
   );
 }
 function zoom_default2() {
-  var filter2 = defaultFilter2, extent2 = defaultExtent, constrain = defaultConstrain, wheelDelta = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners = dispatch_default2("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
+  var filter2 = defaultFilter2, extent = defaultExtent, constrain = defaultConstrain, wheelDelta = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners = dispatch_default2("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
   function zoom(selection2) {
     selection2.property("__zoom", defaultTransform).on("wheel.zoom", wheeled, { passive: false }).on("mousedown.zoom", mousedowned).on("dblclick.zoom", dblclicked).filter(touchable).on("touchstart.zoom", touchstarted).on("touchmove.zoom", touchmoved).on("touchend.zoom touchcancel.zoom", touchended).style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
   }
@@ -2693,7 +2693,7 @@ function zoom_default2() {
   };
   zoom.scaleTo = function(selection2, k, p, event) {
     zoom.transform(selection2, function() {
-      var e = extent2.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+      var e = extent.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k === "function" ? k.apply(this, arguments) : k;
       return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);
     }, p, event);
   };
@@ -2702,12 +2702,12 @@ function zoom_default2() {
       return constrain(this.__zoom.translate(
         typeof x3 === "function" ? x3.apply(this, arguments) : x3,
         typeof y3 === "function" ? y3.apply(this, arguments) : y3
-      ), extent2.apply(this, arguments), translateExtent);
+      ), extent.apply(this, arguments), translateExtent);
     }, null, event);
   };
   zoom.translateTo = function(selection2, x3, y3, p, event) {
     zoom.transform(selection2, function() {
-      var e = extent2.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
+      var e = extent.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
       return constrain(identity2.translate(p0[0], p0[1]).scale(t.k).translate(
         typeof x3 === "function" ? -x3.apply(this, arguments) : -x3,
         typeof y3 === "function" ? -y3.apply(this, arguments) : -y3
@@ -2722,8 +2722,8 @@ function zoom_default2() {
     var x3 = p0[0] - p1[0] * transform2.k, y3 = p0[1] - p1[1] * transform2.k;
     return x3 === transform2.x && y3 === transform2.y ? transform2 : new Transform(transform2.k, x3, y3);
   }
-  function centroid(extent3) {
-    return [(+extent3[0][0] + +extent3[1][0]) / 2, (+extent3[0][1] + +extent3[1][1]) / 2];
+  function centroid(extent2) {
+    return [(+extent2[0][0] + +extent2[1][0]) / 2, (+extent2[0][1] + +extent2[1][1]) / 2];
   }
   function schedule(transition2, transform2, point, event) {
     transition2.on("start.zoom", function() {
@@ -2731,7 +2731,7 @@ function zoom_default2() {
     }).on("interrupt.zoom end.zoom", function() {
       gesture(this, arguments).event(event).end();
     }).tween("zoom", function() {
-      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent2.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a2 = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a2.invert(p).concat(w / a2.k), b.invert(p).concat(w / b.k));
+      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a2 = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a2.invert(p).concat(w / a2.k), b.invert(p).concat(w / b.k));
       return function(t) {
         if (t === 1) t = b;
         else {
@@ -2750,7 +2750,7 @@ function zoom_default2() {
     this.args = args;
     this.active = 0;
     this.sourceEvent = null;
-    this.extent = extent2.apply(that, args);
+    this.extent = extent.apply(that, args);
     this.taps = 0;
   }
   Gesture.prototype = {
@@ -2843,7 +2843,7 @@ function zoom_default2() {
   }
   function dblclicked(event, ...args) {
     if (!filter2.apply(this, arguments)) return;
-    var t0 = this.__zoom, p0 = pointer_default(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent2.apply(this, args), translateExtent);
+    var t0 = this.__zoom, p0 = pointer_default(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
     noevent_default2(event);
     if (duration > 0) select_default2(this).transition().duration(duration).call(schedule, t1, p0, event);
     else select_default2(this).call(zoom.transform, t1, p0, event);
@@ -2922,7 +2922,7 @@ function zoom_default2() {
     return arguments.length ? (touchable = typeof _ === "function" ? _ : constant_default4(!!_), zoom) : touchable;
   };
   zoom.extent = function(_) {
-    return arguments.length ? (extent2 = typeof _ === "function" ? _ : constant_default4([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent2;
+    return arguments.length ? (extent = typeof _ === "function" ? _ : constant_default4([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
   };
   zoom.scaleExtent = function(_) {
     return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]];
@@ -2952,9 +2952,6 @@ function zoom_default2() {
   return zoom;
 }
 
-// src/create-graph.ts
-var import_d3 = require("d3");
-
 // src/utils/timer-manager.ts
 var TimerManager = class {
   activeTimers = /* @__PURE__ */ new Map();
@@ -3341,7 +3338,6 @@ var GraphManager = class {
   linkMarkerSnapshots = null;
   rootSelection = null;
   simulationPaused = false;
-  needsImmediateFitView = false;
   /**
    * Initialize core managers
    */
@@ -3397,7 +3393,6 @@ var GraphManager = class {
     this.linkMarkerSnapshots = null;
     this.rootSelection = null;
     this.simulationPaused = false;
-    this.needsImmediateFitView = false;
     this.cleanupFunctions = [];
   }
   /**
@@ -4417,6 +4412,24 @@ function createGraphSimulation(config) {
     const warmupTicks = enhancedConfig.warmup?.ticks ?? (useAdaptive ? Math.min(100, nodeCount * 2) : 50);
     warmupSimulation(simulation, warmupTicks);
   }
+  if (config.onReady && config.timerManager) {
+    let readyCallbackFired = false;
+    const handleTick = () => {
+      if (!readyCallbackFired && simulation.alpha() < 0.1) {
+        readyCallbackFired = true;
+        simulation.on("tick.ready", null);
+        config.timerManager.setTimeout("simulation-ready", () => {
+          config.onReady?.();
+        }, 100);
+      }
+    };
+    const cleanup = () => {
+      simulation.on("tick.ready", null);
+      config.timerManager.clearTimer("simulation-ready");
+    };
+    simulation.on("tick.ready", handleTick);
+    simulation.on("end.ready", cleanup);
+  }
   return { simulation };
 }
 function seedNodePositions(nodes, containerWidth, containerHeight) {
@@ -4803,50 +4816,12 @@ function renderLinks(ctx, links) {
 
 // src/renderer/nodes.ts
 function renderNodes(ctx, nodes) {
-  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(
-    nodes,
-    (d) => d.id
-  ).join("circle").attr(
-    "r",
-    (node) => node.style?.radius ?? 8
-  ).attr(
-    "fill",
-    (node) => node.style?.fill ?? "#6c5ce7"
-  ).attr(
-    "stroke",
-    (node) => node.style?.stroke ?? "#ffffff"
-  ).attr(
-    "stroke-width",
-    (node) => node.style?.strokeWidth ?? 1.5
-  ).attr(
-    "opacity",
-    (node) => node.style?.opacity ?? 1
-  );
+  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").attr("stroke", (node) => node.style?.stroke ?? "#ffffff").attr("stroke-width", (node) => node.style?.strokeWidth ?? 1.5).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
 }
 
 // src/renderer/node-labels.ts
 function renderNodeLabels(ctx, nodes) {
-  const selection2 = ctx.root.select('[data-layer="node-labels"]').selectAll("text").data(
-    nodes,
-    (d) => d.id
-  ).join("text").attr(
-    "text-anchor",
-    "middle"
-  ).attr(
-    "dominant-baseline",
-    "middle"
-  ).attr(
-    "font-size",
-    9
-  ).attr(
-    "fill",
-    (node) => node.style?.textColor ?? "#ffffff"
-  ).attr(
-    "pointer-events",
-    "none"
-  ).text(
-    (node) => node.label ?? node.id
-  );
+  const selection2 = ctx.root.select('[data-layer="node-labels"]').selectAll("text").data(nodes, (d) => d.id).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", 9).attr("fill", (node) => node.style?.textColor ?? "#ffffff").attr("pointer-events", "none").text((node) => node.label ?? node.id);
   selection2.each(function(node) {
     const textElement = this;
     const fullLabel = node.label ?? node.id;
@@ -4855,10 +4830,7 @@ function renderNodeLabels(ctx, nodes) {
     let truncatedLabel = fullLabel;
     textElement.textContent = truncatedLabel;
     while (truncatedLabel.length > 1 && textElement.getComputedTextLength() > maxWidth) {
-      truncatedLabel = truncatedLabel.slice(
-        0,
-        -1
-      );
+      truncatedLabel = truncatedLabel.slice(0, -1);
       textElement.textContent = `${truncatedLabel}\u2026`;
     }
   });
@@ -4992,10 +4964,12 @@ var RenderPipeline = class {
       }
       if (this.manager.timerManager && this.manager.fitViewCallback) {
         this.manager.timerManager.debounce("fit-view-resize", () => {
-          if (this.manager.fitViewCallback) {
-            this.manager.fitViewCallback();
-          }
-        }, 150);
+          this.manager.timerManager.setTimeout("fit-view-layout", () => {
+            if (this.manager.fitViewCallback) {
+              this.manager.fitViewCallback();
+            }
+          }, 50);
+        }, 200);
       }
     });
     this.manager.addCleanup(cleanupResize);
@@ -5065,15 +5039,23 @@ var RenderPipeline = class {
       config: this.manager.config.simulation
     };
     try {
-      const simulationResult = createGraphSimulation(simulationConfig);
+      const simulationConfigWithCallback = {
+        ...simulationConfig,
+        onReady: () => {
+          if (this.manager.fitViewCallback) {
+            this.manager.fitViewCallback();
+          }
+        },
+        timerManager: this.manager.timerManager ?? void 0
+      };
+      const simulationResult = createGraphSimulation(simulationConfigWithCallback);
       this.manager.simulation = simulationResult.simulation;
       const centerX = simulationConfig.width / 2;
       const centerY = simulationConfig.height / 2;
       this.manager.simulation.force("center", center_default(centerX, centerY));
-      if (simulationConfig.width > 0 && simulationConfig.height > 0) {
+      if (simulationConfigWithCallback.width > 0 && simulationConfigWithCallback.height > 0) {
         this.manager.reheatSimulation(0.3);
         this.manager.simulationPaused = false;
-        this.manager.needsImmediateFitView = true;
       } else {
         this.manager.simulation.stop();
         this.manager.simulationPaused = true;
@@ -6099,6 +6081,27 @@ var SelectionManager = class {
   }
 };
 
+// src/utils/resolve-node-style.ts
+var DEFAULT_NODE_HOVER_STYLE = {
+  stroke: `color-mix(in srgb, ${"#8E42EE" /* PURPLE */}, ${"#000000" /* BLACK */} 20%)`,
+  strokeWidth: 3
+};
+function resolveNodeStyle(params) {
+  if (params.isSelected) {
+    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
+  }
+  if (params.isHovered) {
+    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
+  }
+  return void 0;
+}
+function mergeNodeStyle(base, override) {
+  return {
+    ...base,
+    ...override
+  };
+}
+
 // src/core/interaction-manager.ts
 var InteractionManager = class {
   constructor(manager) {
@@ -6150,7 +6153,13 @@ var InteractionManager = class {
           tooltipConfig: this.manager.config.interaction.hover.tooltip
         });
       }
-      createNodeHover(selections.nodeSelection, this.manager.config.interaction.hover.nodeStyle);
+      const defaultNodeHoverStyle = resolveNodeStyle({
+        node: {},
+        // We don't need the actual node for defaults
+        interaction: this.manager.config.interaction,
+        isHovered: true
+      });
+      createNodeHover(selections.nodeSelection, defaultNodeHoverStyle);
       createLinkHover(selections.linkSelection, this.manager.config.interaction.hover.linkStyle);
     }
   }
@@ -6470,6 +6479,7 @@ async function captureAndDownloadGraph(container, options = {}) {
   }
   svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgClone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+  fixTextStyling(svgClone);
   const svgString = new XMLSerializer().serializeToString(svgClone);
   const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
   const svgUrl = URL.createObjectURL(svgBlob);
@@ -6616,6 +6626,64 @@ function createLegendSVGElement(legendEntries, dimensions) {
   });
   return legendGroup;
 }
+function fixTextStyling(svgElement) {
+  const nodeLabelsLayer = svgElement.querySelector('[data-layer="node-labels"]');
+  if (nodeLabelsLayer) {
+    const nodeTexts = nodeLabelsLayer.querySelectorAll("text");
+    nodeTexts.forEach((text) => {
+      const textElement = text;
+      textElement.setAttribute("font-family", 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
+      if (!textElement.getAttribute("font-size")) {
+        textElement.setAttribute("font-size", "9");
+      }
+      textElement.setAttribute("font-weight", "500");
+      textElement.setAttribute("text-anchor", "middle");
+      textElement.setAttribute("dominant-baseline", "central");
+      if (!textElement.getAttribute("fill")) {
+        textElement.setAttribute("fill", "#374151");
+      }
+    });
+  }
+  const linkLabels = svgElement.querySelectorAll("g.link-label");
+  linkLabels.forEach((labelGroup) => {
+    const textElement = labelGroup.querySelector("text");
+    if (textElement) {
+      textElement.setAttribute("font-family", 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
+      if (!textElement.getAttribute("font-size")) {
+        textElement.setAttribute("font-size", "10");
+      }
+      textElement.setAttribute("font-weight", "400");
+      textElement.setAttribute("text-anchor", "middle");
+      textElement.setAttribute("dominant-baseline", "central");
+      if (!textElement.getAttribute("fill")) {
+        textElement.setAttribute("fill", "#6b7280");
+      }
+    }
+    const rectElement = labelGroup.querySelector("rect");
+    if (rectElement) {
+      if (!rectElement.getAttribute("fill")) {
+        rectElement.setAttribute("fill", "#ffffff");
+      }
+      if (!rectElement.getAttribute("stroke")) {
+        rectElement.setAttribute("stroke", "#e5e7eb");
+      }
+      if (!rectElement.getAttribute("stroke-width")) {
+        rectElement.setAttribute("stroke-width", "1");
+      }
+      rectElement.setAttribute("rx", "4");
+    }
+  });
+  const allTexts = svgElement.querySelectorAll("text");
+  allTexts.forEach((text) => {
+    const textElement = text;
+    if (!textElement.getAttribute("font-family")) {
+      textElement.setAttribute("font-family", 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
+    }
+    if (!textElement.getAttribute("font-size")) {
+      textElement.setAttribute("font-size", "10");
+    }
+  });
+}
 function normalizeColor(color2) {
   const rgbMatch = color2.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
   if (rgbMatch) {
@@ -6948,10 +7016,6 @@ function createGraph(config) {
       renderPipeline.execute().then((selections) => {
         interactionManager.setupInteractions(selections);
         setupAdditionalComponents();
-        if (graphManager.needsImmediateFitView) {
-          graphManager.needsImmediateFitView = false;
-          fitViewWithInitialPositions();
-        }
       }).catch((error) => {
         console.error("[Polly Graph] Render failed:", error);
       });
@@ -7022,56 +7086,34 @@ function createGraph(config) {
     const svg = graphManager.svgElement;
     const nodes = config.nodes;
     if (nodes.length === 0) return;
-    const positions = nodes.map((node) => ({
-      x: node.x ?? 0,
-      y: node.y ?? 0
-    }));
-    const xExtent = (0, import_d3.extent)(positions, (d) => d.x);
-    const yExtent = (0, import_d3.extent)(positions, (d) => d.y);
-    const padding = 50;
-    const width = graphManager.dimensions.width - padding * 2;
-    const height = graphManager.dimensions.height - padding * 2;
-    const nodeWidth = xExtent[1] - xExtent[0];
-    const nodeHeight = yExtent[1] - yExtent[0];
-    if (nodeWidth === 0 || nodeHeight === 0) {
+    const graphRoot = select_default2(svg).select('[data-layer="viewport"]');
+    const graphRootNode = graphRoot.node();
+    if (!graphRootNode) {
+      console.warn("[Polly Graph] Cannot fit view: graph root not found");
       return;
     }
-    const scale = Math.min(width / nodeWidth, height / nodeHeight, 3);
-    const centerX = (xExtent[0] + xExtent[1]) / 2;
-    const centerY = (yExtent[0] + yExtent[1]) / 2;
-    const transform2 = identity2.translate(graphManager.dimensions.width / 2, graphManager.dimensions.height / 2).scale(scale).translate(-centerX, -centerY);
-    if (graphManager.zoomBehavior) {
-      select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, transform2);
-    }
-  }
-  function fitViewWithInitialPositions() {
-    if (!graphManager.simulation || !graphManager.svgElement) {
-      console.warn("[Polly Graph] Cannot fit view: simulation or SVG not available");
+    let bounds;
+    try {
+      bounds = graphRootNode.getBBox();
+    } catch {
+      console.warn("[Polly Graph] Cannot get bounds, falling back to default view");
       return;
     }
-    const svg = graphManager.svgElement;
-    const nodes = config.nodes;
-    if (nodes.length === 0) return;
-    const positions = nodes.map((node) => ({
-      x: node.initialX ?? node.x ?? 0,
-      y: node.initialY ?? node.y ?? 0
-    }));
-    const xExtent = (0, import_d3.extent)(positions, (d) => d.x);
-    const yExtent = (0, import_d3.extent)(positions, (d) => d.y);
-    const padding = 50;
-    const width = graphManager.dimensions.width - padding * 2;
-    const height = graphManager.dimensions.height - padding * 2;
-    const nodeWidth = xExtent[1] - xExtent[0];
-    const nodeHeight = yExtent[1] - yExtent[0];
-    if (nodeWidth === 0 || nodeHeight === 0) {
+    if (bounds.width === 0 || bounds.height === 0) {
       return;
     }
-    const scale = Math.min(width / nodeWidth, height / nodeHeight, 3);
-    const centerX = (xExtent[0] + xExtent[1]) / 2;
-    const centerY = (yExtent[0] + yExtent[1]) / 2;
-    const transform2 = identity2.translate(graphManager.dimensions.width / 2, graphManager.dimensions.height / 2).scale(scale).translate(-centerX, -centerY);
+    const svgRect = svg.getBoundingClientRect();
+    const padding = 40;
+    const availableWidth = svgRect.width - padding * 2;
+    const availableHeight = svgRect.height - padding * 2;
+    const scaleX = availableWidth / bounds.width;
+    const scaleY = availableHeight / bounds.height;
+    const scale = Math.min(scaleX, scaleY, 4);
+    const centerX = bounds.x + bounds.width / 2;
+    const centerY = bounds.y + bounds.height / 2;
+    const transform2 = identity2.translate(svgRect.width / 2, svgRect.height / 2).scale(scale).translate(-centerX, -centerY);
     if (graphManager.zoomBehavior) {
-      select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, transform2);
+      select_default2(svg).transition().duration(750).call(graphManager.zoomBehavior.transform, transform2);
     }
   }
   function exportGraph(fileName) {

package/dist/index.css

@@ -200,14 +200,17 @@
 }
 
 /* src/styles/graph-tooltip.css */
+:root {
+  --dark-bg: color-mix(in srgb, #808080, #000000 20%);
+}
 .graph-tooltip {
   position: absolute;
   pointer-events: none;
   z-index: 1000;
   width: fit-content;
   max-width: 280px;
-  border-radius: 10px;
-  background: #0f172a;
+  border-radius: 0.375rem;
+  background: var(--dark-bg);
   color: #f8fafc;
   border: 1px solid rgba(255, 255, 255, 0.08);
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
@@ -230,15 +233,15 @@
 .graph-tooltip__content {
   position: relative;
   z-index: 2;
-  padding: 10px 14px;
+  padding: 0.375rem 0.5rem;
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
 .graph-tooltip__arrow {
   position: absolute;
-  width: 12px;
-  height: 12px;
-  background: #0f172a;
+  width: 0.625rem;
+  height: 0.625rem;
+  background: var(--dark-bg);
   transform: rotate(45deg);
   z-index: 1;
 }
@@ -298,6 +301,10 @@
   display: block;
   width: 100%;
   height: 100%;
+  cursor: grab;
+}
+.pg-canvas:active {
+  cursor: grabbing;
 }
 .pg-overlay {
   position: absolute;
@@ -310,6 +317,7 @@
   transition: r 0.2s ease, stroke-width 0.2s ease;
 }
 .pg-layer-links line {
+  cursor: pointer;
   transition: stroke-opacity 0.2s ease;
 }
 

package/dist/index.js

@@ -2630,15 +2630,15 @@ function defaultWheelDelta(event) {
 function defaultTouchable2() {
   return navigator.maxTouchPoints || "ontouchstart" in this;
 }
-function defaultConstrain(transform2, extent2, translateExtent) {
-  var dx0 = transform2.invertX(extent2[0][0]) - translateExtent[0][0], dx1 = transform2.invertX(extent2[1][0]) - translateExtent[1][0], dy0 = transform2.invertY(extent2[0][1]) - translateExtent[0][1], dy1 = transform2.invertY(extent2[1][1]) - translateExtent[1][1];
+function defaultConstrain(transform2, extent, translateExtent) {
+  var dx0 = transform2.invertX(extent[0][0]) - translateExtent[0][0], dx1 = transform2.invertX(extent[1][0]) - translateExtent[1][0], dy0 = transform2.invertY(extent[0][1]) - translateExtent[0][1], dy1 = transform2.invertY(extent[1][1]) - translateExtent[1][1];
   return transform2.translate(
     dx1 > dx0 ? (dx0 + dx1) / 2 : Math.min(0, dx0) || Math.max(0, dx1),
     dy1 > dy0 ? (dy0 + dy1) / 2 : Math.min(0, dy0) || Math.max(0, dy1)
   );
 }
 function zoom_default2() {
-  var filter2 = defaultFilter2, extent2 = defaultExtent, constrain = defaultConstrain, wheelDelta = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners = dispatch_default2("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
+  var filter2 = defaultFilter2, extent = defaultExtent, constrain = defaultConstrain, wheelDelta = defaultWheelDelta, touchable = defaultTouchable2, scaleExtent = [0, Infinity], translateExtent = [[-Infinity, -Infinity], [Infinity, Infinity]], duration = 250, interpolate = zoom_default, listeners = dispatch_default2("start", "zoom", "end"), touchstarting, touchfirst, touchending, touchDelay = 500, wheelDelay = 150, clickDistance2 = 0, tapDistance = 10;
   function zoom(selection2) {
     selection2.property("__zoom", defaultTransform).on("wheel.zoom", wheeled, { passive: false }).on("mousedown.zoom", mousedowned).on("dblclick.zoom", dblclicked).filter(touchable).on("touchstart.zoom", touchstarted).on("touchmove.zoom", touchmoved).on("touchend.zoom touchcancel.zoom", touchended).style("-webkit-tap-highlight-color", "rgba(0,0,0,0)");
   }
@@ -2661,7 +2661,7 @@ function zoom_default2() {
   };
   zoom.scaleTo = function(selection2, k, p, event) {
     zoom.transform(selection2, function() {
-      var e = extent2.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k === "function" ? k.apply(this, arguments) : k;
+      var e = extent.apply(this, arguments), t0 = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p, p1 = t0.invert(p0), k1 = typeof k === "function" ? k.apply(this, arguments) : k;
       return constrain(translate(scale(t0, k1), p0, p1), e, translateExtent);
     }, p, event);
   };
@@ -2670,12 +2670,12 @@ function zoom_default2() {
       return constrain(this.__zoom.translate(
         typeof x3 === "function" ? x3.apply(this, arguments) : x3,
         typeof y3 === "function" ? y3.apply(this, arguments) : y3
-      ), extent2.apply(this, arguments), translateExtent);
+      ), extent.apply(this, arguments), translateExtent);
     }, null, event);
   };
   zoom.translateTo = function(selection2, x3, y3, p, event) {
     zoom.transform(selection2, function() {
-      var e = extent2.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
+      var e = extent.apply(this, arguments), t = this.__zoom, p0 = p == null ? centroid(e) : typeof p === "function" ? p.apply(this, arguments) : p;
       return constrain(identity2.translate(p0[0], p0[1]).scale(t.k).translate(
         typeof x3 === "function" ? -x3.apply(this, arguments) : -x3,
         typeof y3 === "function" ? -y3.apply(this, arguments) : -y3
@@ -2690,8 +2690,8 @@ function zoom_default2() {
     var x3 = p0[0] - p1[0] * transform2.k, y3 = p0[1] - p1[1] * transform2.k;
     return x3 === transform2.x && y3 === transform2.y ? transform2 : new Transform(transform2.k, x3, y3);
   }
-  function centroid(extent3) {
-    return [(+extent3[0][0] + +extent3[1][0]) / 2, (+extent3[0][1] + +extent3[1][1]) / 2];
+  function centroid(extent2) {
+    return [(+extent2[0][0] + +extent2[1][0]) / 2, (+extent2[0][1] + +extent2[1][1]) / 2];
   }
   function schedule(transition2, transform2, point, event) {
     transition2.on("start.zoom", function() {
@@ -2699,7 +2699,7 @@ function zoom_default2() {
     }).on("interrupt.zoom end.zoom", function() {
       gesture(this, arguments).event(event).end();
     }).tween("zoom", function() {
-      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent2.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a2 = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a2.invert(p).concat(w / a2.k), b.invert(p).concat(w / b.k));
+      var that = this, args = arguments, g = gesture(that, args).event(event), e = extent.apply(that, args), p = point == null ? centroid(e) : typeof point === "function" ? point.apply(that, args) : point, w = Math.max(e[1][0] - e[0][0], e[1][1] - e[0][1]), a2 = that.__zoom, b = typeof transform2 === "function" ? transform2.apply(that, args) : transform2, i = interpolate(a2.invert(p).concat(w / a2.k), b.invert(p).concat(w / b.k));
       return function(t) {
         if (t === 1) t = b;
         else {
@@ -2718,7 +2718,7 @@ function zoom_default2() {
     this.args = args;
     this.active = 0;
     this.sourceEvent = null;
-    this.extent = extent2.apply(that, args);
+    this.extent = extent.apply(that, args);
     this.taps = 0;
   }
   Gesture.prototype = {
@@ -2811,7 +2811,7 @@ function zoom_default2() {
   }
   function dblclicked(event, ...args) {
     if (!filter2.apply(this, arguments)) return;
-    var t0 = this.__zoom, p0 = pointer_default(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent2.apply(this, args), translateExtent);
+    var t0 = this.__zoom, p0 = pointer_default(event.changedTouches ? event.changedTouches[0] : event, this), p1 = t0.invert(p0), k1 = t0.k * (event.shiftKey ? 0.5 : 2), t1 = constrain(translate(scale(t0, k1), p0, p1), extent.apply(this, args), translateExtent);
     noevent_default2(event);
     if (duration > 0) select_default2(this).transition().duration(duration).call(schedule, t1, p0, event);
     else select_default2(this).call(zoom.transform, t1, p0, event);
@@ -2890,7 +2890,7 @@ function zoom_default2() {
     return arguments.length ? (touchable = typeof _ === "function" ? _ : constant_default4(!!_), zoom) : touchable;
   };
   zoom.extent = function(_) {
-    return arguments.length ? (extent2 = typeof _ === "function" ? _ : constant_default4([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent2;
+    return arguments.length ? (extent = typeof _ === "function" ? _ : constant_default4([[+_[0][0], +_[0][1]], [+_[1][0], +_[1][1]]]), zoom) : extent;
   };
   zoom.scaleExtent = function(_) {
     return arguments.length ? (scaleExtent[0] = +_[0], scaleExtent[1] = +_[1], zoom) : [scaleExtent[0], scaleExtent[1]];
@@ -2920,9 +2920,6 @@ function zoom_default2() {
   return zoom;
 }
 
-// src/create-graph.ts
-import { extent } from "d3";
-
 // src/utils/timer-manager.ts
 var TimerManager = class {
   activeTimers = /* @__PURE__ */ new Map();
@@ -3309,7 +3306,6 @@ var GraphManager = class {
   linkMarkerSnapshots = null;
   rootSelection = null;
   simulationPaused = false;
-  needsImmediateFitView = false;
   /**
    * Initialize core managers
    */
@@ -3365,7 +3361,6 @@ var GraphManager = class {
     this.linkMarkerSnapshots = null;
     this.rootSelection = null;
     this.simulationPaused = false;
-    this.needsImmediateFitView = false;
     this.cleanupFunctions = [];
   }
   /**
@@ -4385,6 +4380,24 @@ function createGraphSimulation(config) {
     const warmupTicks = enhancedConfig.warmup?.ticks ?? (useAdaptive ? Math.min(100, nodeCount * 2) : 50);
     warmupSimulation(simulation, warmupTicks);
   }
+  if (config.onReady && config.timerManager) {
+    let readyCallbackFired = false;
+    const handleTick = () => {
+      if (!readyCallbackFired && simulation.alpha() < 0.1) {
+        readyCallbackFired = true;
+        simulation.on("tick.ready", null);
+        config.timerManager.setTimeout("simulation-ready", () => {
+          config.onReady?.();
+        }, 100);
+      }
+    };
+    const cleanup = () => {
+      simulation.on("tick.ready", null);
+      config.timerManager.clearTimer("simulation-ready");
+    };
+    simulation.on("tick.ready", handleTick);
+    simulation.on("end.ready", cleanup);
+  }
   return { simulation };
 }
 function seedNodePositions(nodes, containerWidth, containerHeight) {
@@ -4771,50 +4784,12 @@ function renderLinks(ctx, links) {
 
 // src/renderer/nodes.ts
 function renderNodes(ctx, nodes) {
-  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(
-    nodes,
-    (d) => d.id
-  ).join("circle").attr(
-    "r",
-    (node) => node.style?.radius ?? 8
-  ).attr(
-    "fill",
-    (node) => node.style?.fill ?? "#6c5ce7"
-  ).attr(
-    "stroke",
-    (node) => node.style?.stroke ?? "#ffffff"
-  ).attr(
-    "stroke-width",
-    (node) => node.style?.strokeWidth ?? 1.5
-  ).attr(
-    "opacity",
-    (node) => node.style?.opacity ?? 1
-  );
+  return ctx.root.select('[data-layer="nodes"]').selectAll("circle").data(nodes, (d) => d.id).join("circle").attr("r", (node) => node.style?.radius ?? 8).attr("fill", (node) => node.style?.fill ?? "#6c5ce7").attr("stroke", (node) => node.style?.stroke ?? "#ffffff").attr("stroke-width", (node) => node.style?.strokeWidth ?? 1.5).attr("opacity", (node) => node.style?.opacity ?? 1).style("cursor", "pointer");
 }
 
 // src/renderer/node-labels.ts
 function renderNodeLabels(ctx, nodes) {
-  const selection2 = ctx.root.select('[data-layer="node-labels"]').selectAll("text").data(
-    nodes,
-    (d) => d.id
-  ).join("text").attr(
-    "text-anchor",
-    "middle"
-  ).attr(
-    "dominant-baseline",
-    "middle"
-  ).attr(
-    "font-size",
-    9
-  ).attr(
-    "fill",
-    (node) => node.style?.textColor ?? "#ffffff"
-  ).attr(
-    "pointer-events",
-    "none"
-  ).text(
-    (node) => node.label ?? node.id
-  );
+  const selection2 = ctx.root.select('[data-layer="node-labels"]').selectAll("text").data(nodes, (d) => d.id).join("text").attr("text-anchor", "middle").attr("dominant-baseline", "middle").attr("font-size", 9).attr("fill", (node) => node.style?.textColor ?? "#ffffff").attr("pointer-events", "none").text((node) => node.label ?? node.id);
   selection2.each(function(node) {
     const textElement = this;
     const fullLabel = node.label ?? node.id;
@@ -4823,10 +4798,7 @@ function renderNodeLabels(ctx, nodes) {
     let truncatedLabel = fullLabel;
     textElement.textContent = truncatedLabel;
     while (truncatedLabel.length > 1 && textElement.getComputedTextLength() > maxWidth) {
-      truncatedLabel = truncatedLabel.slice(
-        0,
-        -1
-      );
+      truncatedLabel = truncatedLabel.slice(0, -1);
       textElement.textContent = `${truncatedLabel}\u2026`;
     }
   });
@@ -4960,10 +4932,12 @@ var RenderPipeline = class {
       }
       if (this.manager.timerManager && this.manager.fitViewCallback) {
         this.manager.timerManager.debounce("fit-view-resize", () => {
-          if (this.manager.fitViewCallback) {
-            this.manager.fitViewCallback();
-          }
-        }, 150);
+          this.manager.timerManager.setTimeout("fit-view-layout", () => {
+            if (this.manager.fitViewCallback) {
+              this.manager.fitViewCallback();
+            }
+          }, 50);
+        }, 200);
       }
     });
     this.manager.addCleanup(cleanupResize);
@@ -5033,15 +5007,23 @@ var RenderPipeline = class {
       config: this.manager.config.simulation
     };
     try {
-      const simulationResult = createGraphSimulation(simulationConfig);
+      const simulationConfigWithCallback = {
+        ...simulationConfig,
+        onReady: () => {
+          if (this.manager.fitViewCallback) {
+            this.manager.fitViewCallback();
+          }
+        },
+        timerManager: this.manager.timerManager ?? void 0
+      };
+      const simulationResult = createGraphSimulation(simulationConfigWithCallback);
       this.manager.simulation = simulationResult.simulation;
       const centerX = simulationConfig.width / 2;
       const centerY = simulationConfig.height / 2;
       this.manager.simulation.force("center", center_default(centerX, centerY));
-      if (simulationConfig.width > 0 && simulationConfig.height > 0) {
+      if (simulationConfigWithCallback.width > 0 && simulationConfigWithCallback.height > 0) {
         this.manager.reheatSimulation(0.3);
         this.manager.simulationPaused = false;
-        this.manager.needsImmediateFitView = true;
       } else {
         this.manager.simulation.stop();
         this.manager.simulationPaused = true;
@@ -6067,6 +6049,27 @@ var SelectionManager = class {
   }
 };
 
+// src/utils/resolve-node-style.ts
+var DEFAULT_NODE_HOVER_STYLE = {
+  stroke: `color-mix(in srgb, ${"#8E42EE" /* PURPLE */}, ${"#000000" /* BLACK */} 20%)`,
+  strokeWidth: 3
+};
+function resolveNodeStyle(params) {
+  if (params.isSelected) {
+    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.selection?.nodeStyle);
+  }
+  if (params.isHovered) {
+    return mergeNodeStyle(DEFAULT_NODE_HOVER_STYLE, params.interaction?.hover?.nodeStyle);
+  }
+  return void 0;
+}
+function mergeNodeStyle(base, override) {
+  return {
+    ...base,
+    ...override
+  };
+}
+
 // src/core/interaction-manager.ts
 var InteractionManager = class {
   constructor(manager) {
@@ -6118,7 +6121,13 @@ var InteractionManager = class {
           tooltipConfig: this.manager.config.interaction.hover.tooltip
         });
       }
-      createNodeHover(selections.nodeSelection, this.manager.config.interaction.hover.nodeStyle);
+      const defaultNodeHoverStyle = resolveNodeStyle({
+        node: {},
+        // We don't need the actual node for defaults
+        interaction: this.manager.config.interaction,
+        isHovered: true
+      });
+      createNodeHover(selections.nodeSelection, defaultNodeHoverStyle);
       createLinkHover(selections.linkSelection, this.manager.config.interaction.hover.linkStyle);
     }
   }
@@ -6438,6 +6447,7 @@ async function captureAndDownloadGraph(container, options = {}) {
   }
   svgClone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
   svgClone.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
+  fixTextStyling(svgClone);
   const svgString = new XMLSerializer().serializeToString(svgClone);
   const svgBlob = new Blob([svgString], { type: "image/svg+xml;charset=utf-8" });
   const svgUrl = URL.createObjectURL(svgBlob);
@@ -6584,6 +6594,64 @@ function createLegendSVGElement(legendEntries, dimensions) {
   });
   return legendGroup;
 }
+function fixTextStyling(svgElement) {
+  const nodeLabelsLayer = svgElement.querySelector('[data-layer="node-labels"]');
+  if (nodeLabelsLayer) {
+    const nodeTexts = nodeLabelsLayer.querySelectorAll("text");
+    nodeTexts.forEach((text) => {
+      const textElement = text;
+      textElement.setAttribute("font-family", 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
+      if (!textElement.getAttribute("font-size")) {
+        textElement.setAttribute("font-size", "9");
+      }
+      textElement.setAttribute("font-weight", "500");
+      textElement.setAttribute("text-anchor", "middle");
+      textElement.setAttribute("dominant-baseline", "central");
+      if (!textElement.getAttribute("fill")) {
+        textElement.setAttribute("fill", "#374151");
+      }
+    });
+  }
+  const linkLabels = svgElement.querySelectorAll("g.link-label");
+  linkLabels.forEach((labelGroup) => {
+    const textElement = labelGroup.querySelector("text");
+    if (textElement) {
+      textElement.setAttribute("font-family", 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
+      if (!textElement.getAttribute("font-size")) {
+        textElement.setAttribute("font-size", "10");
+      }
+      textElement.setAttribute("font-weight", "400");
+      textElement.setAttribute("text-anchor", "middle");
+      textElement.setAttribute("dominant-baseline", "central");
+      if (!textElement.getAttribute("fill")) {
+        textElement.setAttribute("fill", "#6b7280");
+      }
+    }
+    const rectElement = labelGroup.querySelector("rect");
+    if (rectElement) {
+      if (!rectElement.getAttribute("fill")) {
+        rectElement.setAttribute("fill", "#ffffff");
+      }
+      if (!rectElement.getAttribute("stroke")) {
+        rectElement.setAttribute("stroke", "#e5e7eb");
+      }
+      if (!rectElement.getAttribute("stroke-width")) {
+        rectElement.setAttribute("stroke-width", "1");
+      }
+      rectElement.setAttribute("rx", "4");
+    }
+  });
+  const allTexts = svgElement.querySelectorAll("text");
+  allTexts.forEach((text) => {
+    const textElement = text;
+    if (!textElement.getAttribute("font-family")) {
+      textElement.setAttribute("font-family", 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif');
+    }
+    if (!textElement.getAttribute("font-size")) {
+      textElement.setAttribute("font-size", "10");
+    }
+  });
+}
 function normalizeColor(color2) {
   const rgbMatch = color2.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
   if (rgbMatch) {
@@ -6916,10 +6984,6 @@ function createGraph(config) {
       renderPipeline.execute().then((selections) => {
         interactionManager.setupInteractions(selections);
         setupAdditionalComponents();
-        if (graphManager.needsImmediateFitView) {
-          graphManager.needsImmediateFitView = false;
-          fitViewWithInitialPositions();
-        }
       }).catch((error) => {
         console.error("[Polly Graph] Render failed:", error);
       });
@@ -6990,56 +7054,34 @@ function createGraph(config) {
     const svg = graphManager.svgElement;
     const nodes = config.nodes;
     if (nodes.length === 0) return;
-    const positions = nodes.map((node) => ({
-      x: node.x ?? 0,
-      y: node.y ?? 0
-    }));
-    const xExtent = extent(positions, (d) => d.x);
-    const yExtent = extent(positions, (d) => d.y);
-    const padding = 50;
-    const width = graphManager.dimensions.width - padding * 2;
-    const height = graphManager.dimensions.height - padding * 2;
-    const nodeWidth = xExtent[1] - xExtent[0];
-    const nodeHeight = yExtent[1] - yExtent[0];
-    if (nodeWidth === 0 || nodeHeight === 0) {
+    const graphRoot = select_default2(svg).select('[data-layer="viewport"]');
+    const graphRootNode = graphRoot.node();
+    if (!graphRootNode) {
+      console.warn("[Polly Graph] Cannot fit view: graph root not found");
       return;
     }
-    const scale = Math.min(width / nodeWidth, height / nodeHeight, 3);
-    const centerX = (xExtent[0] + xExtent[1]) / 2;
-    const centerY = (yExtent[0] + yExtent[1]) / 2;
-    const transform2 = identity2.translate(graphManager.dimensions.width / 2, graphManager.dimensions.height / 2).scale(scale).translate(-centerX, -centerY);
-    if (graphManager.zoomBehavior) {
-      select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, transform2);
-    }
-  }
-  function fitViewWithInitialPositions() {
-    if (!graphManager.simulation || !graphManager.svgElement) {
-      console.warn("[Polly Graph] Cannot fit view: simulation or SVG not available");
+    let bounds;
+    try {
+      bounds = graphRootNode.getBBox();
+    } catch {
+      console.warn("[Polly Graph] Cannot get bounds, falling back to default view");
       return;
     }
-    const svg = graphManager.svgElement;
-    const nodes = config.nodes;
-    if (nodes.length === 0) return;
-    const positions = nodes.map((node) => ({
-      x: node.initialX ?? node.x ?? 0,
-      y: node.initialY ?? node.y ?? 0
-    }));
-    const xExtent = extent(positions, (d) => d.x);
-    const yExtent = extent(positions, (d) => d.y);
-    const padding = 50;
-    const width = graphManager.dimensions.width - padding * 2;
-    const height = graphManager.dimensions.height - padding * 2;
-    const nodeWidth = xExtent[1] - xExtent[0];
-    const nodeHeight = yExtent[1] - yExtent[0];
-    if (nodeWidth === 0 || nodeHeight === 0) {
+    if (bounds.width === 0 || bounds.height === 0) {
       return;
     }
-    const scale = Math.min(width / nodeWidth, height / nodeHeight, 3);
-    const centerX = (xExtent[0] + xExtent[1]) / 2;
-    const centerY = (yExtent[0] + yExtent[1]) / 2;
-    const transform2 = identity2.translate(graphManager.dimensions.width / 2, graphManager.dimensions.height / 2).scale(scale).translate(-centerX, -centerY);
+    const svgRect = svg.getBoundingClientRect();
+    const padding = 40;
+    const availableWidth = svgRect.width - padding * 2;
+    const availableHeight = svgRect.height - padding * 2;
+    const scaleX = availableWidth / bounds.width;
+    const scaleY = availableHeight / bounds.height;
+    const scale = Math.min(scaleX, scaleY, 4);
+    const centerX = bounds.x + bounds.width / 2;
+    const centerY = bounds.y + bounds.height / 2;
+    const transform2 = identity2.translate(svgRect.width / 2, svgRect.height / 2).scale(scale).translate(-centerX, -centerY);
     if (graphManager.zoomBehavior) {
-      select_default2(svg).transition().duration(400).call(graphManager.zoomBehavior.transform, transform2);
+      select_default2(svg).transition().duration(750).call(graphManager.zoomBehavior.transform, transform2);
     }
   }
   function exportGraph(fileName) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "polly-graph",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Reusable D3-based graph visualization SDK with configurable nodes, links, labels, interactions, and layout behaviors.",
   "license": "MIT",
   "author": "Badal",
@@ -55,8 +55,7 @@
     "prepublishOnly": "npm run lint && npm run typecheck && npm run test && npm run build"
   },
   "dependencies": {
-    "d3": "7.9.0",
-    "html2canvas": "^1.4.1"
+    "d3": "7.9.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",