feat: hot corners (#521)

* feat: hot corners

* feat: hot corners

* feat: hot corners

* fix(devtools): keep the floating trigger clear of page scrollbars

* feat(devtools): expand the docked trigger tab on hover, click to open, drag to undock

* test(devtools): match the magnetic mode tooltip text, raise size limit

The drag tooltip tests looked for the old Drag text. The tooltip now
explains magnetic mode. Raise the core bundle limit from 65 KB to 66 KB
for the hot corner and edge dock code (65.54 KB now).

---------

Co-authored-by: Alem Tuzlak <t.zlak@hotmail.com>

Author: bart-krakowski

.changeset/trigger-edge-dock.md

@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': minor
+---
+
+Implement the hot corner feature for the trigger edge dock.

docs/configuration.md

@@ -35,7 +35,7 @@ The `config` object is mainly focused around user interaction with the devtools
 { position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'middle-left' | 'middle-right' }
 ```
 
-- `triggerMode` - How the trigger is placed. `'floating'` (the default) lets you drag the trigger anywhere on screen, and throw it: it glides with momentum and springs back off the edges. `'fixed'` anchors it to `position`. The floating spot is persisted in local storage.
+- `triggerMode` - How the trigger is placed. `'floating'` (the default) lets you drag the trigger anywhere on screen, and throw it: it glides with momentum and springs back off the edges. Drag it off any screen edge to dock it as a slim tab. Hover the tab to show the TanStack mark, click it to open the panel, or drag it to pull the trigger back out, and hold it still over a glowing corner for two seconds to drop it there without pinning. `'fixed'` anchors it to `position`. The floating spot is persisted in local storage.
 
 ```ts
 { triggerMode: 'fixed' | 'floating' }

package.json

@@ -51,7 +51,7 @@
   "size-limit": [
     {
       "path": "packages/devtools/dist/index.js",
-      "limit": "65 KB"
+      "limit": "66 KB"
     },
     {
       "path": "packages/event-bus-client/dist/esm/plugin.js",

packages/devtools/src/components/tanstack-trigger-mark.tsx

@@ -7,6 +7,9 @@ const RAINBOW_STOP_0 = '#FF5F5F' // semantic-color-exempt: trigger-rainbow-mark
 const RAINBOW_STOP_1 = '#FFA05C' // semantic-color-exempt: trigger-rainbow-mark
 const RAINBOW_STOP_2 = '#FFF27C' // semantic-color-exempt: trigger-rainbow-mark
 const RAINBOW_STOP_3 = '#74DCFF' // semantic-color-exempt: trigger-rainbow-mark
+// Exposed as a single opaque CSS value so the edge tab button (a plain DOM
+// element, not an SVG) can paint the same rainbow as its background.
+export const TRIGGER_MARK_GRADIENT = `linear-gradient(to bottom, ${RAINBOW_STOP_0} 0%, ${RAINBOW_STOP_1} 34.4449%, ${RAINBOW_STOP_2} 73.3354%, ${RAINBOW_STOP_3} 100%)` // semantic-color-exempt: trigger-rainbow-mark
 
 /**
  * The default trigger mark: the rainbow palm from the TanStack dark favicon,