From 0d98d4090e9a84812d22cd6f7ff8ea18fbd95c2b Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 9 Jan 2026 12:09:13 -0500
Subject: [PATCH 1/5] feat(ui): Add support for dragging keyless prompt

---
 .../devPrompts/KeylessPrompt/index.tsx        |  60 +++-
 .../KeylessPrompt/use-drag-to-corner.ts       | 280 ++++++++++++++++++
 .../ui/src/components/devPrompts/shared.tsx   |  44 +--
 3 files changed, 360 insertions(+), 24 deletions(-)
 create mode 100644 packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts

diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
index d6e5070cdd4..ea63538650f 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
@@ -16,6 +16,7 @@ import {
   PromptSuccessIcon,
 } from '../shared';
 import { KeySlashIcon } from './KeySlashIcon';
+import { useDragToCorner } from './use-drag-to-corner';
 import { useRevalidateEnvironment } from './use-revalidate-environment';
 
 type KeylessPromptProps = {
@@ -42,6 +43,7 @@ function withLastActiveFallback(cb: () => string): string {
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
+  const { corner, isDragging, style: positionStyle, containerRef, onPointerDown, preventClick } = useDragToCorner();
 
   useEffect(() => {
     if (isSignedIn) {
@@ -114,16 +116,27 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   return (
     <Portal>
       <PromptContainer
+        ref={containerRef}
         data-expanded={isForcedExpanded}
+        data-dragging={isDragging}
+        onPointerDown={onPointerDown}
+        style={positionStyle}
         sx={t => ({
           position: 'fixed',
-          bottom: '1.25rem',
-          right: '1.25rem',
           height: `${t.sizes.$10}`,
           minWidth: '13.4rem',
           paddingLeft: `${t.space.$3}`,
           borderRadius: '1.25rem',
-          transition: 'all 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+          touchAction: 'none', // Prevent scroll interference on mobile
+          cursor: isDragging ? 'grabbing' : 'grab',
+
+          '&:hover [data-drag-handle]': {
+            opacity: 0.4,
+          },
+
+          '&[data-dragging="true"] [data-drag-handle]': {
+            opacity: 0.6,
+          },
 
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
@@ -140,7 +153,6 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             gap: `${t.space.$1x5}`,
             padding: `${t.space.$2x5} ${t.space.$3} ${t.space.$3} ${t.space.$3}`,
             borderRadius: `${t.radii.$xl}`,
-            transition: 'all 230ms cubic-bezier(0.28, 1, 0.32, 1)',
           },
         })}
       >
@@ -149,15 +161,53 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           aria-expanded={isForcedExpanded}
           aria-controls={contentIdentifier}
           id={buttonIdentifier}
-          onClick={() => !claimed && setIsExpanded(prev => !prev)}
+          onClick={e => {
+            if (preventClick) {
+              e.preventDefault();
+              e.stopPropagation();
+              return;
+            }
+            if (!claimed) {
+              setIsExpanded(prev => !prev);
+            }
+          }}
           css={css`
             ${basePromptElementStyles};
             width: 100%;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            position: relative;
           `}
         >
+          {/* Drag handle indicator */}
+          <div
+            data-drag-handle
+            css={css`
+              position: absolute;
+              left: 0.5rem;
+              top: 50%;
+              transform: translateY(-50%);
+              display: flex;
+              gap: 0.125rem;
+              opacity: 0;
+              transition: opacity 150ms ease-out;
+              pointer-events: none;
+            `}
+            aria-hidden='true'
+          >
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={i}
+                css={css`
+                  width: 0.1875rem;
+                  height: 0.1875rem;
+                  background-color: #8c8c8c;
+                  border-radius: 50%;
+                `}
+              />
+            ))}
+          </div>
           <Flex
             sx={t => ({
               alignItems: 'center',
diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
new file mode 100644
index 00000000000..84529991428
--- /dev/null
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
@@ -0,0 +1,280 @@
+import type { PointerEventHandler } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+
+const STORAGE_KEY = 'clerk-keyless-prompt-corner';
+const LERP_FACTOR = 0.15; // Smooth trailing effect
+const INERTIA_MULTIPLIER = 8; // Velocity projection multiplier
+const CORNER_OFFSET = '1.25rem';
+const DRAG_THRESHOLD = 5; // Minimum pixels to move before starting drag
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface UseDragToCornerResult {
+  corner: Corner;
+  isDragging: boolean;
+  style: React.CSSProperties;
+  containerRef: React.RefObject<HTMLDivElement>;
+  onPointerDown: PointerEventHandler;
+  preventClick: boolean; // Flag to prevent click events after drag
+}
+
+// Lerp utility for smooth interpolation
+const lerp = (start: number, end: number, factor: number): number => {
+  return start + (end - start) * factor;
+};
+
+// Determine corner based on position relative to viewport center
+const getCornerFromPosition = (x: number, y: number): Corner => {
+  const centerX = window.innerWidth / 2;
+  const centerY = window.innerHeight / 2;
+
+  const isLeft = x < centerX;
+  const isTop = y < centerY;
+
+  if (isTop && isLeft) return 'top-left';
+  if (isTop && !isLeft) return 'top-right';
+  if (!isTop && isLeft) return 'bottom-left';
+  return 'bottom-right';
+};
+
+// Get CSS styles for a corner position
+const getCornerStyles = (corner: Corner): React.CSSProperties => {
+  switch (corner) {
+    case 'top-left':
+      return { top: CORNER_OFFSET, left: CORNER_OFFSET };
+    case 'top-right':
+      return { top: CORNER_OFFSET, right: CORNER_OFFSET };
+    case 'bottom-left':
+      return { bottom: CORNER_OFFSET, left: CORNER_OFFSET };
+    case 'bottom-right':
+      return { bottom: CORNER_OFFSET, right: CORNER_OFFSET };
+  }
+};
+
+// Get corner position in pixels (for smooth transition)
+const getCornerPositionInPixels = (corner: Corner, elementWidth: number, elementHeight: number): Position => {
+  const offset = 20; // 1.25rem ≈ 20px
+  switch (corner) {
+    case 'top-left':
+      return { x: offset, y: offset };
+    case 'top-right':
+      return { x: window.innerWidth - elementWidth - offset, y: offset };
+    case 'bottom-left':
+      return { x: offset, y: window.innerHeight - elementHeight - offset };
+    case 'bottom-right':
+      return { x: window.innerWidth - elementWidth - offset, y: window.innerHeight - elementHeight - offset };
+  }
+};
+
+// Load corner preference from localStorage
+const loadCornerPreference = (): Corner => {
+  if (typeof window === 'undefined') return 'bottom-right';
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(stored)) {
+      return stored as Corner;
+    }
+  } catch {
+    // Ignore localStorage errors
+  }
+  return 'bottom-right';
+};
+
+// Save corner preference to localStorage
+const saveCornerPreference = (corner: Corner): void => {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(STORAGE_KEY, corner);
+  } catch {
+    // Ignore localStorage errors
+  }
+};
+
+export const useDragToCorner = (): UseDragToCornerResult => {
+  const [corner, setCorner] = useState<Corner>(loadCornerPreference);
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStyle, setDragStyle] = useState<React.CSSProperties>({});
+  const [preventClick, setPreventClick] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const animationFrameRef = useRef<number | null>(null);
+  const targetPosRef = useRef<Position>({ x: 0, y: 0 });
+  const currentPosRef = useRef<Position>({ x: 0, y: 0 });
+  const lastPosRef = useRef<Position>({ x: 0, y: 0 });
+  const velocityRef = useRef<Position>({ x: 0, y: 0 });
+  const startPosRef = useRef<Position>({ x: 0, y: 0 });
+  const startOffsetRef = useRef<Position>({ x: 0, y: 0 });
+  const lastTimeRef = useRef<number>(0);
+  const hasStartedDraggingRef = useRef<boolean>(false);
+
+  // Animation loop for lerp-based dragging
+  const animate = useCallback(() => {
+    const current = currentPosRef.current;
+    const target = targetPosRef.current;
+
+    // Lerp current position towards target
+    current.x = lerp(current.x, target.x, LERP_FACTOR);
+    current.y = lerp(current.y, target.y, LERP_FACTOR);
+
+    // Calculate velocity from position delta
+    const now = performance.now();
+    const deltaTime = Math.max(now - lastTimeRef.current, 1); // Prevent division by zero
+    const deltaX = current.x - lastPosRef.current.x;
+    const deltaY = current.y - lastPosRef.current.y;
+
+    velocityRef.current.x = deltaX / (deltaTime / 16.67); // Normalize to 60fps
+    velocityRef.current.y = deltaY / (deltaTime / 16.67);
+
+    lastPosRef.current = { ...current };
+    lastTimeRef.current = now;
+
+    // Update position style
+    setDragStyle({
+      position: 'fixed',
+      left: `${current.x}px`,
+      top: `${current.y}px`,
+      transition: 'none', // No transition during drag
+    });
+
+    animationFrameRef.current = requestAnimationFrame(animate);
+  }, []);
+
+  // Start drag
+  const handlePointerDown: PointerEventHandler = useCallback(
+    e => {
+      // Only allow dragging on the button/header area, not on links
+      const target = e.target as HTMLElement;
+      if (target.tagName === 'A' || target.closest('a')) {
+        return;
+      }
+
+      const container = containerRef.current;
+      if (!container) return;
+
+      const rect = container.getBoundingClientRect();
+      const startX = e.clientX;
+      const startY = e.clientY;
+
+      // Initialize positions
+      startPosRef.current = { x: startX, y: startY };
+      startOffsetRef.current = { x: rect.left, y: rect.top };
+      currentPosRef.current = { x: rect.left, y: rect.top };
+      targetPosRef.current = { x: rect.left, y: rect.top };
+      lastPosRef.current = { x: rect.left, y: rect.top };
+      velocityRef.current = { x: 0, y: 0 };
+      lastTimeRef.current = performance.now();
+      hasStartedDraggingRef.current = false;
+
+      // Handle pointer move
+      const handlePointerMove = (moveEvent: PointerEvent) => {
+        const deltaX = moveEvent.clientX - startPosRef.current.x;
+        const deltaY = moveEvent.clientY - startPosRef.current.y;
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+        // Only start dragging if moved beyond threshold
+        if (!hasStartedDraggingRef.current && distance < DRAG_THRESHOLD) {
+          return;
+        }
+
+        if (!hasStartedDraggingRef.current) {
+          // Start dragging now
+          hasStartedDraggingRef.current = true;
+          setIsDragging(true);
+          // Start animation loop
+          animationFrameRef.current = requestAnimationFrame(animate);
+        }
+
+        moveEvent.preventDefault();
+        targetPosRef.current = {
+          x: startOffsetRef.current.x + deltaX,
+          y: startOffsetRef.current.y + deltaY,
+        };
+      };
+
+      // Handle pointer up
+      const handlePointerUp = () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+
+        // Stop animation loop
+        if (animationFrameRef.current !== null) {
+          cancelAnimationFrame(animationFrameRef.current);
+          animationFrameRef.current = null;
+        }
+
+        // Only process drag end if we actually started dragging
+        if (hasStartedDraggingRef.current) {
+          setIsDragging(false);
+          setPreventClick(true);
+
+          // Project final position with inertia
+          const current = currentPosRef.current;
+          const velocity = velocityRef.current;
+          const projectedX = current.x + velocity.x * INERTIA_MULTIPLIER;
+          const projectedY = current.y + velocity.y * INERTIA_MULTIPLIER;
+
+          // Determine target corner
+          const newCorner = getCornerFromPosition(projectedX, projectedY);
+
+          // Get the target corner position in pixels for smooth transition
+          const rect = container.getBoundingClientRect();
+          const targetPos = getCornerPositionInPixels(newCorner, rect.width, rect.height);
+
+          // Animate to corner position smoothly
+          setDragStyle({
+            position: 'fixed',
+            left: `${targetPos.x}px`,
+            top: `${targetPos.y}px`,
+            transition: 'all 400ms cubic-bezier(0.2, 0, 0.2, 1)', // Smooth ease-in-out
+          });
+
+          // Update corner and save preference
+          setCorner(newCorner);
+          saveCornerPreference(newCorner);
+
+          // After transition completes, switch to corner-based positioning
+          setTimeout(() => {
+            setDragStyle({});
+            setPreventClick(false);
+          }, 400); // Match transition duration
+        }
+
+        hasStartedDraggingRef.current = false;
+      };
+
+      window.addEventListener('pointermove', handlePointerMove);
+      window.addEventListener('pointerup', handlePointerUp, { once: true });
+    },
+    [animate],
+  );
+
+  // Cleanup animation frame on unmount
+  useEffect(() => {
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+
+  // Combine corner styles with drag styles
+  const style: React.CSSProperties = {
+    ...getCornerStyles(corner),
+    ...dragStyle, // Always apply dragStyle (empty when not dragging/snapping)
+    transition: isDragging ? 'none' : dragStyle.transition || 'all 250ms cubic-bezier(0.2, 0, 0.2, 1)', // Use dragStyle transition if present
+  };
+
+  return {
+    corner,
+    isDragging,
+    style,
+    containerRef,
+    onPointerDown: handlePointerDown,
+    preventClick,
+  };
+};
diff --git a/packages/ui/src/components/devPrompts/shared.tsx b/packages/ui/src/components/devPrompts/shared.tsx
index c75db72821c..cbe87e91bdd 100644
--- a/packages/ui/src/components/devPrompts/shared.tsx
+++ b/packages/ui/src/components/devPrompts/shared.tsx
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
+import React from 'react';
 
 import { Flex } from '@/ui/customizables';
 
@@ -7,25 +8,30 @@ import { Flex } from '@/ui/customizables';
  * A container for prompt components
  * @internal
  */
-export function PromptContainer({ children, sx, ...props }: React.ComponentProps<typeof Flex>) {
-  return (
-    <Flex
-      sx={t => [
-        {
-          borderRadius: '1.25rem',
-          fontFamily: t.fonts.$main,
-          background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
-          boxShadow:
-            '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
-        },
-        sx,
-      ]}
-      {...props}
-    >
-      {children}
-    </Flex>
-  );
-}
+export const PromptContainer = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof Flex>>(
+  ({ children, sx, ...props }, ref) => {
+    return (
+      <Flex
+        ref={ref}
+        sx={t => [
+          {
+            borderRadius: '1.25rem',
+            fontFamily: t.fonts.$main,
+            background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
+            boxShadow:
+              '0px 0px 0px 0.5px #2F3037 inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, 0px 0px 0.8px 0.8px rgba(255, 255, 255, 0.20) inset, 0px 0px 0px 0px rgba(255, 255, 255, 0.72), 0px 16px 36px -6px rgba(0, 0, 0, 0.36), 0px 6px 16px -2px rgba(0, 0, 0, 0.20);',
+          },
+          sx,
+        ]}
+        {...props}
+      >
+        {children}
+      </Flex>
+    );
+  },
+);
+
+PromptContainer.displayName = 'PromptContainer';
 
 /**
  * @internal

From 3add3d618456b3793ddfe78b1fa822ffde871441 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 9 Jan 2026 12:14:14 -0500
Subject: [PATCH 2/5] Update use-drag-to-corner.ts

---
 .../KeylessPrompt/use-drag-to-corner.ts       | 117 +++++++++---------
 1 file changed, 60 insertions(+), 57 deletions(-)

diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
index 84529991428..7a112aeb064 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
@@ -1,13 +1,13 @@
 import type { PointerEventHandler } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
 const STORAGE_KEY = 'clerk-keyless-prompt-corner';
-const LERP_FACTOR = 0.15; // Smooth trailing effect
-const INERTIA_MULTIPLIER = 8; // Velocity projection multiplier
+const LERP_FACTOR = 0.15;
+const INERTIA_MULTIPLIER = 8;
 const CORNER_OFFSET = '1.25rem';
-const DRAG_THRESHOLD = 5; // Minimum pixels to move before starting drag
+const DRAG_THRESHOLD = 5;
 
 interface Position {
   x: number;
@@ -20,15 +20,13 @@ interface UseDragToCornerResult {
   style: React.CSSProperties;
   containerRef: React.RefObject<HTMLDivElement>;
   onPointerDown: PointerEventHandler;
-  preventClick: boolean; // Flag to prevent click events after drag
+  preventClick: boolean;
 }
 
-// Lerp utility for smooth interpolation
 const lerp = (start: number, end: number, factor: number): number => {
   return start + (end - start) * factor;
 };
 
-// Determine corner based on position relative to viewport center
 const getCornerFromPosition = (x: number, y: number): Corner => {
   const centerX = window.innerWidth / 2;
   const centerY = window.innerHeight / 2;
@@ -36,13 +34,18 @@ const getCornerFromPosition = (x: number, y: number): Corner => {
   const isLeft = x < centerX;
   const isTop = y < centerY;
 
-  if (isTop && isLeft) return 'top-left';
-  if (isTop && !isLeft) return 'top-right';
-  if (!isTop && isLeft) return 'bottom-left';
+  if (isTop && isLeft) {
+    return 'top-left';
+  }
+  if (isTop && !isLeft) {
+    return 'top-right';
+  }
+  if (!isTop && isLeft) {
+    return 'bottom-left';
+  }
   return 'bottom-right';
 };
 
-// Get CSS styles for a corner position
 const getCornerStyles = (corner: Corner): React.CSSProperties => {
   switch (corner) {
     case 'top-left':
@@ -56,9 +59,8 @@ const getCornerStyles = (corner: Corner): React.CSSProperties => {
   }
 };
 
-// Get corner position in pixels (for smooth transition)
 const getCornerPositionInPixels = (corner: Corner, elementWidth: number, elementHeight: number): Position => {
-  const offset = 20; // 1.25rem ≈ 20px
+  const offset = 20;
   switch (corner) {
     case 'top-left':
       return { x: offset, y: offset };
@@ -71,9 +73,10 @@ const getCornerPositionInPixels = (corner: Corner, elementWidth: number, element
   }
 };
 
-// Load corner preference from localStorage
 const loadCornerPreference = (): Corner => {
-  if (typeof window === 'undefined') return 'bottom-right';
+  if (typeof window === 'undefined') {
+    return 'bottom-right';
+  }
   try {
     const stored = localStorage.getItem(STORAGE_KEY);
     if (stored && ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(stored)) {
@@ -85,9 +88,10 @@ const loadCornerPreference = (): Corner => {
   return 'bottom-right';
 };
 
-// Save corner preference to localStorage
 const saveCornerPreference = (corner: Corner): void => {
-  if (typeof window === 'undefined') return;
+  if (typeof window === 'undefined') {
+    return;
+  }
   try {
     localStorage.setItem(STORAGE_KEY, corner);
   } catch {
@@ -103,6 +107,7 @@ export const useDragToCorner = (): UseDragToCornerResult => {
 
   const containerRef = useRef<HTMLDivElement | null>(null);
   const animationFrameRef = useRef<number | null>(null);
+  const transitionTimeoutRef = useRef<number | null>(null);
   const targetPosRef = useRef<Position>({ x: 0, y: 0 });
   const currentPosRef = useRef<Position>({ x: 0, y: 0 });
   const lastPosRef = useRef<Position>({ x: 0, y: 0 });
@@ -112,55 +117,55 @@ export const useDragToCorner = (): UseDragToCornerResult => {
   const lastTimeRef = useRef<number>(0);
   const hasStartedDraggingRef = useRef<boolean>(false);
 
-  // Animation loop for lerp-based dragging
   const animate = useCallback(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+
     const current = currentPosRef.current;
     const target = targetPosRef.current;
 
-    // Lerp current position towards target
     current.x = lerp(current.x, target.x, LERP_FACTOR);
     current.y = lerp(current.y, target.y, LERP_FACTOR);
 
-    // Calculate velocity from position delta
     const now = performance.now();
-    const deltaTime = Math.max(now - lastTimeRef.current, 1); // Prevent division by zero
+    const deltaTime = Math.max(now - lastTimeRef.current, 1);
     const deltaX = current.x - lastPosRef.current.x;
     const deltaY = current.y - lastPosRef.current.y;
 
-    velocityRef.current.x = deltaX / (deltaTime / 16.67); // Normalize to 60fps
+    velocityRef.current.x = deltaX / (deltaTime / 16.67);
     velocityRef.current.y = deltaY / (deltaTime / 16.67);
 
-    lastPosRef.current = { ...current };
+    lastPosRef.current.x = current.x;
+    lastPosRef.current.y = current.y;
     lastTimeRef.current = now;
 
-    // Update position style
-    setDragStyle({
-      position: 'fixed',
-      left: `${current.x}px`,
-      top: `${current.y}px`,
-      transition: 'none', // No transition during drag
-    });
+    // Direct DOM manipulation instead of setState
+    container.style.position = 'fixed';
+    container.style.left = `${current.x}px`;
+    container.style.top = `${current.y}px`;
+    container.style.transition = 'none';
 
     animationFrameRef.current = requestAnimationFrame(animate);
   }, []);
 
-  // Start drag
   const handlePointerDown: PointerEventHandler = useCallback(
     e => {
-      // Only allow dragging on the button/header area, not on links
       const target = e.target as HTMLElement;
       if (target.tagName === 'A' || target.closest('a')) {
         return;
       }
 
       const container = containerRef.current;
-      if (!container) return;
+      if (!container) {
+        return;
+      }
 
       const rect = container.getBoundingClientRect();
       const startX = e.clientX;
       const startY = e.clientY;
 
-      // Initialize positions
       startPosRef.current = { x: startX, y: startY };
       startOffsetRef.current = { x: rect.left, y: rect.top };
       currentPosRef.current = { x: rect.left, y: rect.top };
@@ -170,22 +175,18 @@ export const useDragToCorner = (): UseDragToCornerResult => {
       lastTimeRef.current = performance.now();
       hasStartedDraggingRef.current = false;
 
-      // Handle pointer move
       const handlePointerMove = (moveEvent: PointerEvent) => {
         const deltaX = moveEvent.clientX - startPosRef.current.x;
         const deltaY = moveEvent.clientY - startPosRef.current.y;
         const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
 
-        // Only start dragging if moved beyond threshold
         if (!hasStartedDraggingRef.current && distance < DRAG_THRESHOLD) {
           return;
         }
 
         if (!hasStartedDraggingRef.current) {
-          // Start dragging now
           hasStartedDraggingRef.current = true;
           setIsDragging(true);
-          // Start animation loop
           animationFrameRef.current = requestAnimationFrame(animate);
         }
 
@@ -196,52 +197,50 @@ export const useDragToCorner = (): UseDragToCornerResult => {
         };
       };
 
-      // Handle pointer up
       const handlePointerUp = () => {
         window.removeEventListener('pointermove', handlePointerMove);
         window.removeEventListener('pointerup', handlePointerUp);
 
-        // Stop animation loop
         if (animationFrameRef.current !== null) {
           cancelAnimationFrame(animationFrameRef.current);
           animationFrameRef.current = null;
         }
 
-        // Only process drag end if we actually started dragging
         if (hasStartedDraggingRef.current) {
           setIsDragging(false);
           setPreventClick(true);
 
-          // Project final position with inertia
           const current = currentPosRef.current;
           const velocity = velocityRef.current;
           const projectedX = current.x + velocity.x * INERTIA_MULTIPLIER;
           const projectedY = current.y + velocity.y * INERTIA_MULTIPLIER;
 
-          // Determine target corner
           const newCorner = getCornerFromPosition(projectedX, projectedY);
 
-          // Get the target corner position in pixels for smooth transition
           const rect = container.getBoundingClientRect();
           const targetPos = getCornerPositionInPixels(newCorner, rect.width, rect.height);
 
-          // Animate to corner position smoothly
           setDragStyle({
             position: 'fixed',
             left: `${targetPos.x}px`,
             top: `${targetPos.y}px`,
-            transition: 'all 400ms cubic-bezier(0.2, 0, 0.2, 1)', // Smooth ease-in-out
+            transition: 'all 400ms cubic-bezier(0.2, 0, 0.2, 1)',
           });
 
-          // Update corner and save preference
           setCorner(newCorner);
           saveCornerPreference(newCorner);
 
-          // After transition completes, switch to corner-based positioning
-          setTimeout(() => {
+          transitionTimeoutRef.current = window.setTimeout(() => {
             setDragStyle({});
             setPreventClick(false);
-          }, 400); // Match transition duration
+            // Clear inline styles to return to React-controlled positioning
+            if (container) {
+              container.style.position = '';
+              container.style.left = '';
+              container.style.top = '';
+              container.style.transition = '';
+            }
+          }, 400);
         }
 
         hasStartedDraggingRef.current = false;
@@ -253,21 +252,25 @@ export const useDragToCorner = (): UseDragToCornerResult => {
     [animate],
   );
 
-  // Cleanup animation frame on unmount
   useEffect(() => {
     return () => {
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
       }
+      if (transitionTimeoutRef.current !== null) {
+        clearTimeout(transitionTimeoutRef.current);
+      }
     };
   }, []);
 
-  // Combine corner styles with drag styles
-  const style: React.CSSProperties = {
-    ...getCornerStyles(corner),
-    ...dragStyle, // Always apply dragStyle (empty when not dragging/snapping)
-    transition: isDragging ? 'none' : dragStyle.transition || 'all 250ms cubic-bezier(0.2, 0, 0.2, 1)', // Use dragStyle transition if present
-  };
+  const style = useMemo<React.CSSProperties>(
+    () => ({
+      ...getCornerStyles(corner),
+      ...dragStyle,
+      transition: isDragging ? 'none' : dragStyle.transition || 'all 250ms cubic-bezier(0.2, 0, 0.2, 1)',
+    }),
+    [corner, isDragging, dragStyle],
+  );
 
   return {
     corner,

From 9b61c7d715b06de7e69cfe7f2226dde9c9863215 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 9 Jan 2026 13:01:11 -0500
Subject: [PATCH 3/5] refactor implementation

---
 .../devPrompts/KeylessPrompt/index.tsx        |  50 +--
 .../KeylessPrompt/use-drag-to-corner.ts       | 385 +++++++++++-------
 2 files changed, 256 insertions(+), 179 deletions(-)

diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
index ea63538650f..192a7ca4311 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
@@ -43,7 +43,7 @@ function withLastActiveFallback(cb: () => string): string {
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
-  const { corner, isDragging, style: positionStyle, containerRef, onPointerDown, preventClick } = useDragToCorner();
+  const { isDragging, cornerStyle, containerRef, onPointerDown, preventClick } = useDragToCorner();
 
   useEffect(() => {
     if (isSignedIn) {
@@ -118,25 +118,23 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
       <PromptContainer
         ref={containerRef}
         data-expanded={isForcedExpanded}
-        data-dragging={isDragging}
         onPointerDown={onPointerDown}
-        style={positionStyle}
-        sx={t => ({
+        style={{
+          ...cornerStyle,
           position: 'fixed',
+        }}
+        sx={t => ({
           height: `${t.sizes.$10}`,
           minWidth: '13.4rem',
           paddingLeft: `${t.space.$3}`,
           borderRadius: '1.25rem',
           touchAction: 'none', // Prevent scroll interference on mobile
           cursor: isDragging ? 'grabbing' : 'grab',
-
-          '&:hover [data-drag-handle]': {
-            opacity: 0.4,
-          },
-
-          '&[data-dragging="true"] [data-drag-handle]': {
-            opacity: 0.6,
-          },
+          transition: isDragging
+            ? 'none'
+            : isForcedExpanded
+              ? 'height 230ms cubic-bezier(0.28, 1, 0.32, 1), width 230ms cubic-bezier(0.28, 1, 0.32, 1), padding 230ms cubic-bezier(0.28, 1, 0.32, 1), border-radius 230ms cubic-bezier(0.28, 1, 0.32, 1)'
+              : 'height 195ms cubic-bezier(0.2, 0.61, 0.1, 1), width 195ms cubic-bezier(0.2, 0.61, 0.1, 1), padding 195ms cubic-bezier(0.2, 0.61, 0.1, 1), border-radius 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
 
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
@@ -180,34 +178,6 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
             position: relative;
           `}
         >
-          {/* Drag handle indicator */}
-          <div
-            data-drag-handle
-            css={css`
-              position: absolute;
-              left: 0.5rem;
-              top: 50%;
-              transform: translateY(-50%);
-              display: flex;
-              gap: 0.125rem;
-              opacity: 0;
-              transition: opacity 150ms ease-out;
-              pointer-events: none;
-            `}
-            aria-hidden='true'
-          >
-            {[...Array(3)].map((_, i) => (
-              <div
-                key={i}
-                css={css`
-                  width: 0.1875rem;
-                  height: 0.1875rem;
-                  background-color: #8c8c8c;
-                  border-radius: 50%;
-                `}
-              />
-            ))}
-          </div>
           <Flex
             sx={t => ({
               alignItems: 'center',
diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
index 7a112aeb064..584e2b2c834 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
@@ -1,32 +1,40 @@
 import type { PointerEventHandler } from 'react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 
 type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
 const STORAGE_KEY = 'clerk-keyless-prompt-corner';
-const LERP_FACTOR = 0.15;
-const INERTIA_MULTIPLIER = 8;
 const CORNER_OFFSET = '1.25rem';
+const CORNER_OFFSET_PX = 20; // 1.25rem ≈ 20px
 const DRAG_THRESHOLD = 5;
+const VELOCITY_SAMPLE_INTERVAL_MS = 10;
+const VELOCITY_HISTORY_SIZE = 5;
+const INERTIA_DECELERATION_RATE = 0.999;
 
-interface Position {
+interface Point {
   x: number;
   y: number;
 }
 
+interface Velocity {
+  position: Point;
+  timestamp: number;
+}
+
+interface CornerTranslation {
+  corner: Corner;
+  translation: Point;
+}
+
 interface UseDragToCornerResult {
   corner: Corner;
   isDragging: boolean;
-  style: React.CSSProperties;
+  cornerStyle: React.CSSProperties;
   containerRef: React.RefObject<HTMLDivElement>;
   onPointerDown: PointerEventHandler;
   preventClick: boolean;
 }
 
-const lerp = (start: number, end: number, factor: number): number => {
-  return start + (end - start) * factor;
-};
-
 const getCornerFromPosition = (x: number, y: number): Corner => {
   const centerX = window.innerWidth / 2;
   const centerY = window.innerHeight / 2;
@@ -59,20 +67,6 @@ const getCornerStyles = (corner: Corner): React.CSSProperties => {
   }
 };
 
-const getCornerPositionInPixels = (corner: Corner, elementWidth: number, elementHeight: number): Position => {
-  const offset = 20;
-  switch (corner) {
-    case 'top-left':
-      return { x: offset, y: offset };
-    case 'top-right':
-      return { x: window.innerWidth - elementWidth - offset, y: offset };
-    case 'bottom-left':
-      return { x: offset, y: window.innerHeight - elementHeight - offset };
-    case 'bottom-right':
-      return { x: window.innerWidth - elementWidth - offset, y: window.innerHeight - elementHeight - offset };
-  }
-};
-
 const loadCornerPreference = (): Corner => {
   if (typeof window === 'undefined') {
     return 'bottom-right';
@@ -99,57 +93,162 @@ const saveCornerPreference = (corner: Corner): void => {
   }
 };
 
+const project = (initialVelocity: number): number => {
+  return ((initialVelocity / 1000) * INERTIA_DECELERATION_RATE) / (1 - INERTIA_DECELERATION_RATE);
+};
+
+const calculateVelocity = (history: Velocity[]): Point => {
+  if (history.length < 2) {
+    return { x: 0, y: 0 };
+  }
+
+  const oldestPoint = history[0];
+  const latestPoint = history[history.length - 1];
+  const timeDelta = latestPoint.timestamp - oldestPoint.timestamp;
+
+  if (timeDelta === 0) {
+    return { x: 0, y: 0 };
+  }
+
+  // Calculate pixels per millisecond
+  const velocityX = (latestPoint.position.x - oldestPoint.position.x) / timeDelta;
+  const velocityY = (latestPoint.position.y - oldestPoint.position.y) / timeDelta;
+
+  // Convert to pixels per second for more intuitive values
+  return { x: velocityX * 1000, y: velocityY * 1000 };
+};
+
 export const useDragToCorner = (): UseDragToCornerResult => {
   const [corner, setCorner] = useState<Corner>(loadCornerPreference);
   const [isDragging, setIsDragging] = useState(false);
-  const [dragStyle, setDragStyle] = useState<React.CSSProperties>({});
   const [preventClick, setPreventClick] = useState(false);
+  const pendingCornerUpdate = useRef<Corner | null>(null);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const animationFrameRef = useRef<number | null>(null);
-  const transitionTimeoutRef = useRef<number | null>(null);
-  const targetPosRef = useRef<Position>({ x: 0, y: 0 });
-  const currentPosRef = useRef<Position>({ x: 0, y: 0 });
-  const lastPosRef = useRef<Position>({ x: 0, y: 0 });
-  const velocityRef = useRef<Position>({ x: 0, y: 0 });
-  const startPosRef = useRef<Position>({ x: 0, y: 0 });
-  const startOffsetRef = useRef<Position>({ x: 0, y: 0 });
-  const lastTimeRef = useRef<number>(0);
-  const hasStartedDraggingRef = useRef<boolean>(false);
-
-  const animate = useCallback(() => {
+  const machine = useRef<{ state: 'idle' | 'press' | 'animating' } | { state: 'drag'; pointerId: number }>({
+    state: 'idle',
+  });
+
+  const cleanup = useRef<(() => void) | null>(null);
+  const origin = useRef<Point>({ x: 0, y: 0 });
+  const translation = useRef<Point>({ x: 0, y: 0 });
+  const lastTimestamp = useRef<number>(0);
+  const velocities = useRef<Velocity[]>([]);
+
+  const set = useCallback((position: Point) => {
+    if (containerRef.current) {
+      translation.current = position;
+      containerRef.current.style.translate = `${position.x}px ${position.y}px`;
+    }
+  }, []);
+
+  const getCorners = useCallback((): Record<Corner, Point> => {
     const container = containerRef.current;
     if (!container) {
-      return;
+      return {
+        'top-left': { x: 0, y: 0 },
+        'top-right': { x: 0, y: 0 },
+        'bottom-left': { x: 0, y: 0 },
+        'bottom-right': { x: 0, y: 0 },
+      };
     }
 
-    const current = currentPosRef.current;
-    const target = targetPosRef.current;
+    const offset = CORNER_OFFSET_PX;
+    const triggerWidth = container.offsetWidth || 0;
+    const triggerHeight = container.offsetHeight || 0;
+    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
 
-    current.x = lerp(current.x, target.x, LERP_FACTOR);
-    current.y = lerp(current.y, target.y, LERP_FACTOR);
+    const getAbsolutePosition = (corner: Corner): Point => {
+      const isRight = corner.includes('right');
+      const isBottom = corner.includes('bottom');
 
-    const now = performance.now();
-    const deltaTime = Math.max(now - lastTimeRef.current, 1);
-    const deltaX = current.x - lastPosRef.current.x;
-    const deltaY = current.y - lastPosRef.current.y;
+      const x = isRight ? window.innerWidth - scrollbarWidth - offset - triggerWidth : offset;
+      const y = isBottom ? window.innerHeight - offset - triggerHeight : offset;
 
-    velocityRef.current.x = deltaX / (deltaTime / 16.67);
-    velocityRef.current.y = deltaY / (deltaTime / 16.67);
+      return { x, y };
+    };
 
-    lastPosRef.current.x = current.x;
-    lastPosRef.current.y = current.y;
-    lastTimeRef.current = now;
+    const basePosition = getAbsolutePosition(corner);
 
-    // Direct DOM manipulation instead of setState
-    container.style.position = 'fixed';
-    container.style.left = `${current.x}px`;
-    container.style.top = `${current.y}px`;
-    container.style.transition = 'none';
+    const rel = (pos: Point): Point => {
+      return { x: pos.x - basePosition.x, y: pos.y - basePosition.y };
+    };
+
+    return {
+      'top-left': rel(getAbsolutePosition('top-left')),
+      'top-right': rel(getAbsolutePosition('top-right')),
+      'bottom-left': rel(getAbsolutePosition('bottom-left')),
+      'bottom-right': rel(getAbsolutePosition('bottom-right')),
+    };
+  }, [corner]);
 
-    animationFrameRef.current = requestAnimationFrame(animate);
+  const animate = useCallback(
+    (cornerTranslation: CornerTranslation) => {
+      const el = containerRef.current;
+      if (!el) {
+        return;
+      }
+
+      const handleAnimationEnd = (e: TransitionEvent) => {
+        if (e.propertyName === 'translate') {
+          machine.current = { state: 'animating' };
+
+          // Mark that we're waiting for corner update, then update corner state
+          // The useLayoutEffect will reset translate once cornerStyle has been applied
+          pendingCornerUpdate.current = cornerTranslation.corner;
+          setCorner(cornerTranslation.corner);
+          saveCornerPreference(cornerTranslation.corner);
+
+          el.removeEventListener('transitionend', handleAnimationEnd);
+        }
+      };
+
+      el.style.transition = 'translate 300ms cubic-bezier(0.2, 0, 0.2, 1)';
+      el.addEventListener('transitionend', handleAnimationEnd);
+      set(cornerTranslation.translation);
+    },
+    [set],
+  );
+
+  const cancel = useCallback(() => {
+    if (machine.current.state === 'drag') {
+      containerRef.current?.releasePointerCapture(machine.current.pointerId);
+    }
+    machine.current = machine.current.state === 'drag' ? { state: 'animating' } : { state: 'idle' };
+
+    if (cleanup.current !== null) {
+      cleanup.current();
+      cleanup.current = null;
+    }
+
+    velocities.current = [];
+    setIsDragging(false);
+    containerRef.current?.classList.remove('dev-tools-grabbing');
+    document.body.style.removeProperty('user-select');
+    document.body.style.removeProperty('-webkit-user-select');
   }, []);
 
+  // Reset translate after corner state has updated and cornerStyle has been applied
+  useLayoutEffect(() => {
+    if (pendingCornerUpdate.current !== null && pendingCornerUpdate.current === corner) {
+      const el = containerRef.current;
+      if (el && machine.current.state === 'animating') {
+        translation.current = { x: 0, y: 0 };
+        el.style.transition = '';
+        el.style.translate = '0px 0px';
+        machine.current = { state: 'idle' };
+        setPreventClick(false);
+        pendingCornerUpdate.current = null;
+      }
+    }
+  }, [corner]);
+
+  useLayoutEffect(() => {
+    return () => {
+      cancel();
+    };
+  }, [cancel]);
+
   const handlePointerDown: PointerEventHandler = useCallback(
     e => {
       const target = e.target as HTMLElement;
@@ -157,125 +256,133 @@ export const useDragToCorner = (): UseDragToCornerResult => {
         return;
       }
 
+      if (e.button !== 0) {
+        return; // ignore right click
+      }
+
       const container = containerRef.current;
       if (!container) {
         return;
       }
 
-      const rect = container.getBoundingClientRect();
-      const startX = e.clientX;
-      const startY = e.clientY;
-
-      startPosRef.current = { x: startX, y: startY };
-      startOffsetRef.current = { x: rect.left, y: rect.top };
-      currentPosRef.current = { x: rect.left, y: rect.top };
-      targetPosRef.current = { x: rect.left, y: rect.top };
-      lastPosRef.current = { x: rect.left, y: rect.top };
-      velocityRef.current = { x: 0, y: 0 };
-      lastTimeRef.current = performance.now();
-      hasStartedDraggingRef.current = false;
+      origin.current = { x: e.clientX, y: e.clientY };
+      machine.current = { state: 'press' };
+      velocities.current = [];
+      translation.current = { x: 0, y: 0 };
+      lastTimestamp.current = Date.now();
 
       const handlePointerMove = (moveEvent: PointerEvent) => {
-        const deltaX = moveEvent.clientX - startPosRef.current.x;
-        const deltaY = moveEvent.clientY - startPosRef.current.y;
-        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        if (machine.current.state === 'press') {
+          const dx = moveEvent.clientX - origin.current.x;
+          const dy = moveEvent.clientY - origin.current.y;
+          const distance = Math.sqrt(dx * dx + dy * dy);
+
+          if (distance >= DRAG_THRESHOLD) {
+            machine.current = { state: 'drag', pointerId: moveEvent.pointerId };
+            container.setPointerCapture(moveEvent.pointerId);
+            container.classList.add('dev-tools-grabbing');
+            document.body.style.userSelect = 'none';
+            document.body.style.webkitUserSelect = 'none';
+            setIsDragging(true);
+          } else {
+            return;
+          }
+        }
 
-        if (!hasStartedDraggingRef.current && distance < DRAG_THRESHOLD) {
+        if (machine.current.state !== 'drag') {
           return;
         }
 
-        if (!hasStartedDraggingRef.current) {
-          hasStartedDraggingRef.current = true;
-          setIsDragging(true);
-          animationFrameRef.current = requestAnimationFrame(animate);
-        }
+        const currentPosition = { x: moveEvent.clientX, y: moveEvent.clientY };
+        const dx = currentPosition.x - origin.current.x;
+        const dy = currentPosition.y - origin.current.y;
 
-        moveEvent.preventDefault();
-        targetPosRef.current = {
-          x: startOffsetRef.current.x + deltaX,
-          y: startOffsetRef.current.y + deltaY,
+        origin.current = currentPosition;
+
+        const newTranslation = {
+          x: translation.current.x + dx,
+          y: translation.current.y + dy,
         };
+
+        set(newTranslation);
+
+        // Keep a history of recent positions for velocity calculation
+        const now = Date.now();
+        const shouldAddToHistory = now - lastTimestamp.current >= VELOCITY_SAMPLE_INTERVAL_MS;
+
+        if (shouldAddToHistory) {
+          velocities.current = [
+            ...velocities.current.slice(-VELOCITY_HISTORY_SIZE + 1),
+            { position: currentPosition, timestamp: now },
+          ];
+          lastTimestamp.current = now;
+        }
       };
 
       const handlePointerUp = () => {
-        window.removeEventListener('pointermove', handlePointerMove);
-        window.removeEventListener('pointerup', handlePointerUp);
+        const wasDragging = machine.current.state === 'drag';
+        const velocity = calculateVelocity(velocities.current);
+        cancel();
 
-        if (animationFrameRef.current !== null) {
-          cancelAnimationFrame(animationFrameRef.current);
-          animationFrameRef.current = null;
-        }
+        if (wasDragging) {
+          const container = containerRef.current;
+          if (!container) {
+            return;
+          }
 
-        if (hasStartedDraggingRef.current) {
-          setIsDragging(false);
-          setPreventClick(true);
+          const rect = container.getBoundingClientRect();
+          const currentAbsoluteX = rect.left;
+          const currentAbsoluteY = rect.top;
 
-          const current = currentPosRef.current;
-          const velocity = velocityRef.current;
-          const projectedX = current.x + velocity.x * INERTIA_MULTIPLIER;
-          const projectedY = current.y + velocity.y * INERTIA_MULTIPLIER;
+          // Project final position with inertia
+          const projectedX = currentAbsoluteX + project(velocity.x);
+          const projectedY = currentAbsoluteY + project(velocity.y);
 
+          // Determine target corner based on projected position
           const newCorner = getCornerFromPosition(projectedX, projectedY);
 
-          const rect = container.getBoundingClientRect();
-          const targetPos = getCornerPositionInPixels(newCorner, rect.width, rect.height);
-
-          setDragStyle({
-            position: 'fixed',
-            left: `${targetPos.x}px`,
-            top: `${targetPos.y}px`,
-            transition: 'all 400ms cubic-bezier(0.2, 0, 0.2, 1)',
-          });
-
-          setCorner(newCorner);
-          saveCornerPreference(newCorner);
-
-          transitionTimeoutRef.current = window.setTimeout(() => {
-            setDragStyle({});
-            setPreventClick(false);
-            // Clear inline styles to return to React-controlled positioning
-            if (container) {
-              container.style.position = '';
-              container.style.left = '';
-              container.style.top = '';
-              container.style.transition = '';
-            }
-          }, 400);
+          // Get all corner translations relative to current corner
+          const allCorners = getCorners();
+
+          // The translation to animate to is the difference between the new corner's position
+          // and the current translation
+          const targetTranslation = allCorners[newCorner];
+
+          setPreventClick(true);
+          animate({ corner: newCorner, translation: targetTranslation });
         }
+      };
 
-        hasStartedDraggingRef.current = false;
+      const handleClick = (clickEvent: MouseEvent) => {
+        if (machine.current.state === 'animating') {
+          clickEvent.preventDefault();
+          clickEvent.stopPropagation();
+          machine.current = { state: 'idle' };
+          container.removeEventListener('click', handleClick);
+        }
       };
 
       window.addEventListener('pointermove', handlePointerMove);
       window.addEventListener('pointerup', handlePointerUp, { once: true });
-    },
-    [animate],
-  );
+      container.addEventListener('click', handleClick);
 
-  useEffect(() => {
-    return () => {
-      if (animationFrameRef.current !== null) {
-        cancelAnimationFrame(animationFrameRef.current);
+      if (cleanup.current !== null) {
+        cleanup.current();
       }
-      if (transitionTimeoutRef.current !== null) {
-        clearTimeout(transitionTimeoutRef.current);
-      }
-    };
-  }, []);
 
-  const style = useMemo<React.CSSProperties>(
-    () => ({
-      ...getCornerStyles(corner),
-      ...dragStyle,
-      transition: isDragging ? 'none' : dragStyle.transition || 'all 250ms cubic-bezier(0.2, 0, 0.2, 1)',
-    }),
-    [corner, isDragging, dragStyle],
+      cleanup.current = () => {
+        window.removeEventListener('pointermove', handlePointerMove);
+        window.removeEventListener('pointerup', handlePointerUp);
+        container.removeEventListener('click', handleClick);
+      };
+    },
+    [cancel, set, animate, getCorners],
   );
 
   return {
     corner,
     isDragging,
-    style,
+    cornerStyle: getCornerStyles(corner),
     containerRef,
     onPointerDown: handlePointerDown,
     preventClick,

From 799d48b2c095a3f351fac6dd2b17fcd16c81e67f Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 9 Jan 2026 13:41:44 -0500
Subject: [PATCH 4/5] add changeset

---
 .changeset/good-loops-learn.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/good-loops-learn.md

diff --git a/.changeset/good-loops-learn.md b/.changeset/good-loops-learn.md
new file mode 100644
index 00000000000..72da7199056
--- /dev/null
+++ b/.changeset/good-loops-learn.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Adds drag functionality to keyless prompt.

From 5524d648a3dfbb28b2fea6f98f7eea6adb10b3dc Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Fri, 9 Jan 2026 14:19:49 -0500
Subject: [PATCH 5/5] add isInitialized check

---
 .../devPrompts/KeylessPrompt/index.tsx        |  7 +++--
 .../KeylessPrompt/use-drag-to-corner.ts       | 29 +++++++++++++++++--
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
index 192a7ca4311..35a7ff42fb6 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx
@@ -43,7 +43,7 @@ function withLastActiveFallback(cb: () => string): string {
 const KeylessPromptInternal = (_props: KeylessPromptProps) => {
   const { isSignedIn } = useUser();
   const [isExpanded, setIsExpanded] = useState(false);
-  const { isDragging, cornerStyle, containerRef, onPointerDown, preventClick } = useDragToCorner();
+  const { isDragging, cornerStyle, containerRef, onPointerDown, preventClick, isInitialized } = useDragToCorner();
 
   useEffect(() => {
     if (isSignedIn) {
@@ -122,6 +122,7 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
         style={{
           ...cornerStyle,
           position: 'fixed',
+          opacity: isInitialized ? undefined : 0,
         }}
         sx={t => ({
           height: `${t.sizes.$10}`,
@@ -133,8 +134,8 @@ const KeylessPromptInternal = (_props: KeylessPromptProps) => {
           transition: isDragging
             ? 'none'
             : isForcedExpanded
-              ? 'height 230ms cubic-bezier(0.28, 1, 0.32, 1), width 230ms cubic-bezier(0.28, 1, 0.32, 1), padding 230ms cubic-bezier(0.28, 1, 0.32, 1), border-radius 230ms cubic-bezier(0.28, 1, 0.32, 1)'
-              : 'height 195ms cubic-bezier(0.2, 0.61, 0.1, 1), width 195ms cubic-bezier(0.2, 0.61, 0.1, 1), padding 195ms cubic-bezier(0.2, 0.61, 0.1, 1), border-radius 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
+              ? 'opacity 150ms ease-out, height 230ms cubic-bezier(0.28, 1, 0.32, 1), width 230ms cubic-bezier(0.28, 1, 0.32, 1), padding 230ms cubic-bezier(0.28, 1, 0.32, 1), border-radius 230ms cubic-bezier(0.28, 1, 0.32, 1)'
+              : 'opacity 150ms ease-out, height 195ms cubic-bezier(0.2, 0.61, 0.1, 1), width 195ms cubic-bezier(0.2, 0.61, 0.1, 1), padding 195ms cubic-bezier(0.2, 0.61, 0.1, 1), border-radius 195ms cubic-bezier(0.2, 0.61, 0.1, 1)',
 
           '&[data-expanded="false"]:hover': {
             background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 100%), #1f1f1f',
diff --git a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
index 584e2b2c834..3dd5ae3a0e0 100644
--- a/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
+++ b/packages/ui/src/components/devPrompts/KeylessPrompt/use-drag-to-corner.ts
@@ -1,5 +1,5 @@
 import type { PointerEventHandler } from 'react';
-import { useCallback, useLayoutEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 
@@ -33,6 +33,7 @@ interface UseDragToCornerResult {
   containerRef: React.RefObject<HTMLDivElement>;
   onPointerDown: PointerEventHandler;
   preventClick: boolean;
+  isInitialized: boolean;
 }
 
 const getCornerFromPosition = (x: number, y: number): Corner => {
@@ -119,11 +120,34 @@ const calculateVelocity = (history: Velocity[]): Point => {
 };
 
 export const useDragToCorner = (): UseDragToCornerResult => {
-  const [corner, setCorner] = useState<Corner>(loadCornerPreference);
+  // Initialize with deterministic server-safe value to avoid SSR/hydration mismatch
+  const [corner, setCorner] = useState<Corner>('bottom-right');
   const [isDragging, setIsDragging] = useState(false);
   const [preventClick, setPreventClick] = useState(false);
+  const [isInitialized, setIsInitialized] = useState(false);
   const pendingCornerUpdate = useRef<Corner | null>(null);
 
+  // Defer localStorage read to client-side only after mount
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      setIsInitialized(true);
+      return;
+    }
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored && ['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(stored)) {
+        const storedCorner = stored as Corner;
+        // Set corner before making visible to prevent flash
+        setCorner(storedCorner);
+      }
+    } catch {
+      // Ignore localStorage errors
+    } finally {
+      // Mark as initialized after reading localStorage (or if it fails)
+      setIsInitialized(true);
+    }
+  }, []);
+
   const containerRef = useRef<HTMLDivElement | null>(null);
   const machine = useRef<{ state: 'idle' | 'press' | 'animating' } | { state: 'drag'; pointerId: number }>({
     state: 'idle',
@@ -386,5 +410,6 @@ export const useDragToCorner = (): UseDragToCornerResult => {
     containerRef,
     onPointerDown: handlePointerDown,
     preventClick,
+    isInitialized,
   };
 };