fix: properly append drakonwidget container to DOM for diagram rendering

index.html

@@ -1356,30 +1356,14 @@ window.addEventListener('load', function() {
   // Set the diagram content
   widget.setDiagram('business-process', drakonDiagram, null, true);
 
-  // Position the widget in the container
+  // Append the widget's container (with canvas) to our #drakon-canvas element
-  // The render() method creates a container with the canvas
+  if (widget.container) {
-  // We need to move it into our container
+    canvasContainer.appendChild(widget.container);
-  setTimeout(function() {
+    canvasContainer.style.display = 'flex';
-    // The widget creates its own container - we need to extract the canvas
+    canvasContainer.style.alignItems = 'center';
-    var widgetContainer = widget.container || widget.canvas.parentElement;
+    canvasContainer.style.justifyContent = 'center';
-    if (widgetContainer) {
+    canvasContainer.style.overflow = 'hidden';
-      // Set explicit dimensions on our container
+  }
-      canvasContainer.style.display = 'flex';
-      canvasContainer.style.alignItems = 'center';
-      canvasContainer.style.justifyContent = 'center';
-      canvasContainer.style.overflow = 'hidden';
-
-      // Try to append the widget's content
-      if (widget.canvas && widget.canvas.parentElement) {
-        // The canvas might already be in the DOM
-        // Just ensure our container has the right size
-        var rect = canvasContainer.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) {
-          canvasContainer.style.height = '400px';
-        }
-      }
-    }
-  }, 100);
 });
 
 // ============================================