swarm-ui: rewire a notification flow by drag or keyboard

The flow editor can now change a flow's shape on the canvas, not only
through the inspector's fields:

- drag a box onto another to move it and its branch there; a drop the
  save would refuse shows the target dashed red and gives the reason;
- a palette of node kinds adds a node below the picked box on click, or
  below any box it is dragged onto; it offers what the controller lists;
- arrow keys walk the tree, M picks a box up and Enter drops it under
  the focused one, Alt+Up/Down reorder a node among its siblings, Delete
  removes a branch; focus follows the edit;
- each box with siblings says when it runs, and the inspector can move
  it earlier or later, since the router runs children in edge order;
- request_reviewer is a second leaf kind beside todo, with a reviewer
  field;
- leaving with unsaved edits asks first, also for in-app links and the
  back button (a router hook runs navigation past a page's guard).

frontend/packages/swarm-ui/src/pages/notifications/NotificationsPage.css

@@ -73,10 +73,65 @@
   gap: 1em;
 }
 
-.notify-canvas {
+.notify-canvas-wrap {
   flex: 1 1 24em;
   min-width: 0;
+}
+
+.notify-palette {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+.notify-chip {
+  padding: 0.2em 0.7em;
+  border: 1.5px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-elev);
+  color: var(--fg);
+  font: inherit;
+  cursor: grab;
+  touch-action: none;
+}
+
+.notify-chip-match {
+  border-color: var(--purple);
+}
+
+.notify-chip-todo {
+  border-color: var(--green);
+}
+
+.notify-chip-request_reviewer {
+  border-color: var(--green);
+}
+
+.notify-ghost {
+  position: fixed;
+  z-index: 10;
+  padding: 0.2em 0.6em;
+  border: 1.5px solid var(--fg);
+  border-radius: 6px;
+  background: var(--bg-elev);
+  color: var(--fg);
+  pointer-events: none;
+}
+
+.notify-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.notify-canvas {
   max-height: 70vh;
+  user-select: none;
   overflow: auto;
   border: 1px solid var(--border);
   border-radius: 6px;
@@ -90,9 +145,29 @@
 }
 
 .notify-box {
+  cursor: grab;
+  touch-action: none;
+}
+
+.notify-box-source {
   cursor: pointer;
 }
 
+.notify-box-carried {
+  opacity: 0.45;
+}
+
+.notify-box.notify-box-target rect {
+  stroke: var(--green);
+  stroke-width: 3;
+}
+
+.notify-box.notify-box-refused rect {
+  stroke: var(--red);
+  stroke-width: 3;
+  stroke-dasharray: 5 3;
+}
+
 .notify-box rect {
   fill: var(--bg-elev);
   stroke: var(--border);
@@ -107,7 +182,8 @@
   stroke: var(--purple);
 }
 
-.notify-box-todo rect {
+.notify-box-todo rect,
+.notify-box-request_reviewer rect {
   stroke: var(--green);
 }