feat: add draggable graph zones

workplans/RAIL-FAB-WP-0023-zone-drag-interaction.md

@@ -0,0 +1,110 @@
+---
+id: RAIL-FAB-WP-0023
+type: workplan
+title: "Improve zone labels and dragging"
+domain: railiance
+repo: railiance-fabric
+status: active
+owner: codex
+topic_slug: railiance-fabric
+created: "2026-05-25"
+updated: "2026-05-25"
+---
+
+# Improve Zone Labels And Dragging
+
+## Context
+
+RAIL-FAB-WP-0021 introduced zone boundary rectangles and RAIL-FAB-WP-0022
+promoted zones to first-class graph explorer view entities. The current zone
+labels still look like small framed buttons with a white background. That makes
+the overlay read more like controls than like labels printed on a drawing
+surface.
+
+The next interaction step is to let the operator grab a zone and move it around,
+dragging all currently attached visible nodes with it. This makes zones behave
+more like the intended "piece of paper" view entity while keeping the underlying
+Fabric graph unchanged.
+
+## Task 1: Simplify Zone Labels
+
+```task
+id: RAIL-FAB-WP-0023-T01
+status: done
+priority: high
+```
+
+Change zone labels from framed button badges to plain text in the upper-left
+corner of the zone rectangle.
+
+The label should:
+
+- have no frame;
+- have no white background;
+- remain readable against the zone fill;
+- still be keyboard-focusable/clickable enough to open zone details;
+- avoid adding visual clutter to dense graph views.
+
+Expected result: graph explorer zone labels look like text drawn on the zone
+surface rather than separate UI controls.
+
+Result: Updated graph explorer zone labels to render as transparent, unframed
+text in the upper-left corner of each zone rectangle. Labels remain
+keyboard-focusable and clickable, and the visual smoke screenshot confirms the
+labels read as text on the zone surface.
+
+## Task 2: Drag Zones With Member Nodes
+
+```task
+id: RAIL-FAB-WP-0023-T02
+status: done
+priority: high
+```
+
+Add a zone drag interaction that moves all currently attached visible member
+nodes with the zone.
+
+The interaction should:
+
+- start from the zone label or zone boundary affordance;
+- move assigned visible nodes by the drag delta;
+- keep Cytoscape node positions and overlay bounds in sync;
+- update zone details and labels during/after the drag;
+- avoid mutating the underlying Fabric payload;
+- not interfere with normal node dragging more than necessary.
+
+Expected result: grabbing a zone lets the operator reposition the visible zone
+subgraph as a unit.
+
+Result: Added a view-only zone drag interaction using the plain zone label as
+the grab handle. Dragging translates the currently assigned visible zone member
+nodes by the pointer delta, recomputes overlay bounds, refreshes zone details,
+and leaves the Fabric graph payload unchanged.
+
+## Task 3: Verify Interaction Behavior
+
+```task
+id: RAIL-FAB-WP-0023-T03
+status: blocked
+priority: medium
+```
+
+Verify the visual and interaction behavior with focused tests and a browser
+smoke check.
+
+The verification should cover:
+
+- static UI test assertions for the new label/drag helpers;
+- JavaScript syntax validation;
+- graph explorer focused tests;
+- a visual smoke screenshot showing plain labels;
+- manual or scripted confirmation that zone dragging moves member nodes.
+
+Expected result: the UI renders clean labels and the zone drag interaction works
+without breaking existing graph explorer behavior.
+
+Result: Static UI assertions, JavaScript syntax validation, focused graph tests,
+full test suite, Fabric CLI validation, and a headless Edge screenshot pass.
+Automated drag smoke verification is blocked because Edge's remote debugging
+endpoint was not reachable from WSL in this session. Manual verification is
+needed by grabbing a zone label in the running graph explorer.