feat(dashboard): phase B drag-resize grid (Gridstack) replacing masonry

Milestone 72 phase B — Grafana-style drag-resize grid for dashboard widgets:
- DashboardWidget: replace `position` with a 12-col grid placement
  (grid_x/grid_y/grid_w/grid_h). Migration 0021 backfills the old position
  order into a 3-up grid (4 cols x 4 cells each) and drops position.
- View + share render a static CSS grid from x/y/w/h: fixed cell height
  (h * 70px) with the body scrolling, so the arranged layout is what's shown;
  collapses to a single column under 820px.
- Edit view: Gridstack.js 12.6.0 (vanilla, CDN, pinned) — drag the title bar
  to move, drag a corner/edge to resize; every change autosaves to a new
  /d/<id>/edit/layout endpoint. Replaces the SortableJS position reorder.
- add_widget appends at the bottom-left; remove no longer renumbers.
  _get_widgets now orders by grid position (drives DOM + mobile fallback order).

Note: Gridstack drag-resize is browser-only, so CI can't exercise it — needs an
operator visual check of the edit experience.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

steward/templates/dashboard/edit.html

@@ -2,6 +2,9 @@
 {% from "_macros.html" import crumbs %}
 {% block title %}Edit: {{ dashboard.name }} — Steward{% endblock %}
 {% block breadcrumb %}{{ crumbs([("Dashboard", "/"), ("Dashboards", "/dashboards/"), ("Edit " ~ dashboard.name, "")]) }}{% endblock %}
+{% block head %}
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack.min.css">
+{% endblock %}
 {% block content %}
 <div style="display:flex;align-items:baseline;justify-content:space-between;margin-bottom:1.5rem;">
   <h1 class="page-title" style="margin-bottom:0;">Edit: {{ dashboard.name }}</h1>
@@ -10,36 +13,46 @@
 {% include "dashboard/_edit_panels.html" %}
 {% endblock %}
 {% block extra_scripts %}
-<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gridstack@12.6.0/dist/gridstack-all.min.js"></script>
 <script>
 (function () {
-  function initSortable() {
-    var el = document.getElementById('widget-sort-list');
-    if (!el) return;
+  // (Re)initialise the drag-resize grid. Called on first load and after every
+  // HTMX swap (add/remove re-renders #edit-panels with fresh markup, so the old
+  // grid DOM is gone and we bind to the new container).
+  function initGrid() {
+    var el = document.querySelector('.grid-stack');
+    if (!el || el.gridstack) return;           // already bound to this node
     var dashId = el.dataset.dashId;
-    Sortable.create(el, {
-      handle: '.drag-handle',
-      animation: 150,
-      ghostClass: 'sortable-ghost',
-      onEnd: function () {
-        var order = Array.from(el.querySelectorAll('[data-widget-id]'))
-          .map(function (row) { return parseInt(row.dataset.widgetId, 10); });
-        fetch('/d/' + dashId + '/edit/reorder', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ order: order }),
-        });
-      },
-    });
+    var grid = GridStack.init({
+      column: 12,
+      cellHeight: 70,
+      margin: 8,
+      float: false,                            // compact upward, no floating gaps
+      handle: '.panel-drag',                   // drag by the title bar; buttons stay clickable
+      resizable: { handles: 'e, se, s' },
+    }, el);
+    function save() {
+      var items = grid.save(false).map(function (n) {
+        return { id: parseInt(n.id, 10), x: n.x, y: n.y, w: n.w, h: n.h };
+      });
+      fetch('/d/' + dashId + '/edit/layout', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ items: items }),
+      });
+    }
+    grid.on('change', save);
   }
-
-  // Init on first load and after every HTMX swap (add/remove re-renders the list)
-  document.addEventListener('DOMContentLoaded', initSortable);
-  document.addEventListener('htmx:afterSwap', initSortable);
+  document.addEventListener('DOMContentLoaded', initGrid);
+  document.addEventListener('htmx:afterSwap', initGrid);
 })();
 </script>
 <style>
-.sortable-ghost { opacity: 0.4; }
-.drag-handle:active { cursor: grabbing; }
+/* Each Gridstack panel reads as a card; the title bar is the drag handle. */
+.edit-panel { background:var(--bg-card); border:1px solid var(--border-mid); border-radius:6px;
+              padding:0.7rem 0.85rem; height:100%; overflow:hidden; }
+.panel-drag { display:flex; align-items:center; gap:0.5rem; cursor:grab; user-select:none; }
+.panel-drag:active { cursor:grabbing; }
+.grid-stack-item-content { inset:0; }
 </style>
 {% endblock %}