fix: load Gridstack.js locally in HTML head - CDN URLs were 404

static/designer.js

@@ -80,25 +80,8 @@ function showDesigner(templateId = null) {
     `;
     showModal(body, 'A4 Template Designer', 'large');
     
-    // Load Gridstack CSS dynamically
-    if (!document.getElementById('gridstack-css')) {
-      const link = document.createElement('link');
-      link.id = 'gridstack-css';
-      link.rel = 'stylesheet';
-      link.href = 'https://cdn.jsdelivr.net/npm/gridstack@11.1.3/gridstack.min.css';
-      document.head.appendChild(link);
-    }
-
-    // Load Gridstack JS dynamically
-    if (typeof GridStack === 'undefined') {
-      const script = document.createElement('script');
-      script.src = 'https://cdn.jsdelivr.net/npm/gridstack@11.1.3/gridstack-all-jq.js';
-      script.onload = () => initGridstack();
-      document.head.appendChild(script);
-    } else {
-      initGridstack();
-    }
-
+    // Gridstack is loaded via <script> in index.html, just init
+    initGridstack();
     renderDesignerPalette();
   });
 }
@@ -156,7 +139,7 @@ function renderDesignerPalette() {
   const el = document.getElementById('designer-palette-list');
   if (!el) return;
   el.innerHTML = Object.entries(BLOCK_TYPES).map(([type, info]) => `
-    <div class="palette-block" data-type="${type}" onclick="addBlockFromPalette('${type}')">
+    <div class="palette-block" draggable="true" data-type="${type}" onclick="addBlockFromPalette('${type}')">
       <div class="icon" style="background:${info.color}">${info.icon}</div>
       <div>
         <div class="label">${info.label}</div>
@@ -167,16 +150,27 @@ function renderDesignerPalette() {
 }
 
 function setupPaletteDrag() {
-  // Gridstack native widget drop from sidebar
-  if (designerGrid) {
-    designerGrid.removeDraggable('.palette-block');
-    document.querySelectorAll('.palette-block').forEach(el => {
-      designerGrid.draggable(el, {
-        appendTo: '#a4-page',
-        helper: 'clone',
-        revert: 'invalid',
-        handle: 'div',
-      });
+  // Palette items use click-to-add (onclick in renderDesignerPalette)
+  // Native HTML5 drag-and-drop is also supported via the palette items' draggable attribute
+  document.querySelectorAll('.palette-block').forEach(el => {
+    el.addEventListener('dragstart', (e) => {
+      const type = el.dataset.type;
+      e.dataTransfer.setData('text/plain', type);
+    });
+  });
+  
+  // Make the canvas accept drops
+  const canvas = document.getElementById('a4-page');
+  if (canvas) {
+    canvas.addEventListener('dragover', (e) => {
+      e.preventDefault();
+    });
+    canvas.addEventListener('drop', (e) => {
+      e.preventDefault();
+      const type = e.dataTransfer.getData('text/plain');
+      if (type && BLOCK_TYPES[type]) {
+        addBlockFromPalette(type);
+      }
     });
   }
 }