Drag-to-reorder — visual consistency mockup

Target spec applied to both surfaces: the variable table (leveled up to match) and the canvas step. Drag a row in either panel to see the custom ghost, the drop indicator, and the invalid-drop state. Tab to a handle to see the focus ring; hover a handle for the tooltip. The 🔒 row is a locked drop target — drag over it to see the red invalid state.

Direction: level table up to canvas Focus: ring (focus-visible) Tooltip: directive · short canvas copy
Live demo

Both panels now share: 6-dot grip · ring focus · directive tooltip · elevated drag ghost · 2px line + dot drop indicator · red invalid state.

Variable table

Handles always visible (dense editor).

LabelNameType
String ▾
String ▾
String ▾

Canvas steps

Handles reveal on hover (reduces canvas clutter).

4 ◎ Look Up Record
5 ◎ Update Record · If Request is Approved
6 🔒 Update Record · Else if Request is Rejected
State reference

Every state in the shared spec, isolated for review.

Resting handle 6-dot grip, 40% base-content
Focus ring focus-visible: 2px primary ring
Tooltip (directive) dark pill, escapes overflow
Drag to reorder…
Drag ghost 8px radius · 1px border · shadow
Update Record
Drop indicator — valid 2px primary line + leading dot
Drop indicator — invalid switches to error red

Mockup only — approximated Horizon/daisyUI tokens (--b1/--b3/--bc/--p/--error). Not wired to Karuna. Once approved, this becomes PR A (canvas: tooltip directive + focus ring) and PR B (table: custom ghost + drop-indicator dot + invalid state + ring focus).