<div id="workspace-deps-wrapper" style="border:1px solid #d4d4d8;border-radius:10px;overflow:hidden;background:#fff;">
  <div id="workspace-deps-inline" style="min-height:760px;width:100%;background:#f8fafc;overflow:hidden;padding:0;margin:0;">

.. raw:: html
   :file: ../../_static/data/deps.svg

  </div>
  <div style="padding:10px 12px;background:#f1f5f9;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;">
    <span style="color:#334155;font-size:0.95rem;">Interactive SVG (pan, zoom, search)</span>
    <div style="display:flex;align-items:center;gap:6px;">
      <button id="workspace-deps-zoom-out" type="button" style="padding:6px 10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;cursor:pointer;">−</button>
      <button id="workspace-deps-zoom-in" type="button" style="padding:6px 10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#334155;cursor:pointer;">+</button>
    </div>
    <a href="../../_static/data/deps.svg" target="_blank" rel="noopener"
       style="font-weight:600;color:#2563eb;text-decoration:none;">Open SVG ↗</a>
  </div>
</div>
<script>
  (function () {
    const host = document.getElementById("workspace-deps-inline");
    if (!host) {
      return;
    }

    const svg = host.querySelector("svg");
      if (!svg) {
        host.textContent = "Unable to load dependency graph.";
        host.style.display = "flex";
        host.style.alignItems = "center";
        host.style.justifyContent = "center";
      host.style.background = "#f8fafc";
      return;
    }

    svg.removeAttribute("width");
    svg.removeAttribute("height");
    svg.style.width = "100%";
    svg.style.height = "100%";
    svg.style.cursor = "grab";
    svg.style.touchAction = "none";

    const rawViewBox = (svg.getAttribute("viewBox") || "").split(/\s+/).map(Number);
    if (rawViewBox.length !== 4 || rawViewBox.some((v) => Number.isNaN(v))) {
      return;
    }

    const initial = {
      x: rawViewBox[0],
      y: rawViewBox[1],
      width: rawViewBox[2],
      height: rawViewBox[3],
    };

    const state = { ...initial };
    const applyViewBox = () => {
      svg.setAttribute("viewBox", `${state.x} ${state.y} ${state.width} ${state.height}`);
    };

    let isPanning = false;
    let last = { x: 0, y: 0 };

    svg.addEventListener("pointerdown", (event) => {
      isPanning = true;
      last = { x: event.clientX, y: event.clientY };
      svg.setPointerCapture(event.pointerId);
      svg.style.cursor = "grabbing";
    });

    const endPan = (event) => {
      if (event && svg.hasPointerCapture(event.pointerId)) {
        svg.releasePointerCapture(event.pointerId);
      }
      isPanning = false;
      svg.style.cursor = "grab";
    };

    svg.addEventListener("pointerup", endPan);
    svg.addEventListener("pointerleave", endPan);
    svg.addEventListener("pointercancel", endPan);

    const zoomBy = (factor) => {
      const targetWidth = state.width * factor;
      const targetHeight = state.height * factor;
      const minSize = Math.max(initial.width * 0.05, 10);
      const maxSize = initial.width * 20;
      const clampedWidth = Math.min(Math.max(targetWidth, minSize), maxSize);
      const clampedHeight = Math.min(Math.max(targetHeight, minSize), maxSize);

      state.x += (state.width - clampedWidth) / 2;
      state.y += (state.height - clampedHeight) / 2;
      state.width = clampedWidth;
      state.height = clampedHeight;
      applyViewBox();
    };

    const normalizeDelta = (deltaY, deltaMode) => {
      // Make trackpad/wheel zoom feel smooth across devices.
      const multiplier = deltaMode === 1 ? 16 : deltaMode === 2 ? window.innerHeight : 1;
      return deltaY * multiplier;
    };

    svg.addEventListener("pointermove", (event) => {
      if (!isPanning) {
        return;
      }
      const scaleX = state.width / svg.clientWidth;
      const scaleY = state.height / svg.clientHeight;
      state.x -= (event.clientX - last.x) * scaleX;
      state.y -= (event.clientY - last.y) * scaleY;
      last = { x: event.clientX, y: event.clientY };
      applyViewBox();
    });

    svg.addEventListener("wheel", (event) => {
      event.preventDefault();

      const delta = normalizeDelta(event.deltaY, event.deltaMode);
      const factor = Math.exp(delta * 0.0015); // smaller magnitude for smoother scrolling
      zoomBy(factor);
    }, { passive: false });

    const zoomIn = document.getElementById("workspace-deps-zoom-in");
    const zoomOut = document.getElementById("workspace-deps-zoom-out");
    if (zoomIn) {
      zoomIn.addEventListener("click", () => zoomBy(0.9));
    }
    if (zoomOut) {
      zoomOut.addEventListener("click", () => zoomBy(1.1));
    }
  })();
</script>