feat: add DragHandle and useDraggable to make toolbar draggable

[thomaswhyyou]

Description

Adds a drag handle to the toolbar v2 for drag-and-drop, so that it can be repositioned.

Note, as I commented in the module, the useDraggable hook was entirely generated with Claude. I mostly just verified the drag and drop behavior in the browser, and it works fine ✨

Screenshots or videos

CleanShot.2026-02-26.at.16.32.23.mp4

[linear]

KNO-11823 [Toolbar] Drag toolbar to reposition

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
javascript-ms-teams-connect-example	Ready	Preview, Comment	Feb 27, 2026 7:32pm
javascript-nextjs-example	Ready	Preview, Comment	Feb 27, 2026 7:32pm
javascript-slack-connect-example	Ready	Preview, Comment	Feb 27, 2026 7:32pm
javascript-slack-kit-example	Ready	Preview, Comment	Feb 27, 2026 7:32pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 7942fdb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 13 packages

Name	Type
@knocklabs/client	Patch
@knocklabs/react	Patch
client-example	Patch
guide-example	Patch
@knocklabs/expo	Patch
@knocklabs/react-core	Patch
@knocklabs/react-native	Patch
ms-teams-connect-example	Patch
nextjs-app-dir-example	Patch
nextjs-example	Patch
slack-connect-example	Patch
slack-kit-example	Patch
@knocklabs/expo-example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[thomaswhyyou]

• feat: add DragHandle and useDraggable to make toolbar draggable #880 👈 (View in Graphite)
• feat: add focusedGuideKeys debug setting to pin a guide #879
• feat: add ignoreDisplayInterval debug setting to guide toolbar #878
• feat: add skipEngagementTracking debug setting to guide toolbar #877
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[thomaswhyyou]

@cursor review

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

RAF throttle uses stale event, losing final drag position

Low Severity

The RAF throttle in onPointerMove drops intermediate events entirely and captures the stale moveEvent from the closure of the event that triggered the schedule, rather than the most recent event. When a new pointermove arrives while a RAF is pending, it's discarded (return), so the RAF callback processes an outdated position. Combined with cleanup cancelling the pending RAF on pointerup without applying a final position update, this can cause the toolbar to visibly snap back by several pixels on release during fast drags. The standard pattern stores the latest event coordinates in a mutable ref and reads them inside the RAF callback.

Additional Locations (1)

• packages/react/src/modules/guide/components/Toolbar/V2/useDraggable.ts#L115-L126

 

[thomaswhyyou]

Sounds benign enough, can come back if a real issue.

[codecov]

Codecov Report

❌ Patch coverage is 72.61146% with 43 lines in your changes missing coverage. Please review.
✅ Project coverage is 66.79%. Comparing base (13206a0) to head (7942fdb).
⚠️ Report is 1 commits behind head on main.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...modules/guide/components/Toolbar/V2/DragHandle.tsx	26.08%	17 Missing ⚠️
...act/src/modules/guide/components/Toolbar/V2/V2.tsx	10.52%	17 Missing ⚠️
...c/modules/guide/components/Toolbar/KnockButton.tsx	14.28%	6 Missing ⚠️
...odules/guide/components/Toolbar/V2/useDraggable.ts	97.22%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #880      +/-   ##
==========================================
+ Coverage   66.65%   66.79%   +0.14%     
==========================================
  Files         205      207       +2     
  Lines        9032     9182     +150     
  Branches     1201     1224      +23     
==========================================
+ Hits         6020     6133     +113     
- Misses       2988     3025      +37     
  Partials       24       24              

Files with missing lines	Coverage Δ
...odules/guide/components/Toolbar/V2/useDraggable.ts	97.22% <97.22%> (ø)
...c/modules/guide/components/Toolbar/KnockButton.tsx	9.52% <14.28%> (-0.48%)	⬇️
...modules/guide/components/Toolbar/V2/DragHandle.tsx	26.08% <26.08%> (ø)
...act/src/modules/guide/components/Toolbar/V2/V2.tsx	14.75% <10.52%> (-0.49%)	⬇️