Force gutter-drag resize via direct DOM (same workaround)

Dragging the splitter set node.ratio in the Svelte $state tree
correctly (used by save-restore), but the template binding
style=\"flex: {node.ratio}\" on each .side div didn't re-evaluate
when ratio changed — same prop-reactivity wall we hit with the
active border and broadcast color. The gutter would drag invisibly:
internal state moved, panes stayed at their original ratio.

Workaround: SplitNode's onPointerMove now ALSO writes the flex
style directly to the two .side elements via DOM. Svelte still owns
node.ratio for persistence/serialization, but the visual is owned
by the imperative DOM write.

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

src/lib/layout/SplitNode.svelte

@@ -28,6 +28,13 @@
     if (size <= 0) return;
     const r = Math.max(0.05, Math.min(0.95, pos / size));
     node.ratio = r;
+
+    // Brute-force DOM: Svelte's `style="flex: {node.ratio}"` template binding
+    // doesn't propagate ratio changes in this app. Update the .side flex
+    // styles directly so the drag actually moves the gutter visually.
+    const sides = containerEl.querySelectorAll(":scope > .side");
+    if (sides[0]) (sides[0] as HTMLElement).style.flex = String(r);
+    if (sides[1]) (sides[1] as HTMLElement).style.flex = String(1 - r);
   }
 
   function onPointerUp(e: PointerEvent) {