chore(release): 4.63.4 [skip ci]

## [4.63.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.3...v4.63.4) (2025-10-21) ### Bug Fixes * **flashcards:** keep grab point under cursor with proper coordinate conversion ([1869216](1869216d2f))
fix(flashcards): keep grab point under cursor with proper coordinate conversion
2025-10-21 16:28:08 +00:00 · 2025-10-21 11:26:54 -05:00 · 2025-10-21 16:22:59 +00:00 · 2025-10-21 11:21:49 -05:00 · 2025-10-21 16:19:23 +00:00 · 2025-10-21 11:18:04 -05:00
3 changed files with 64 additions and 6 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,24 @@
+## [4.63.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.3...v4.63.4) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** keep grab point under cursor with proper coordinate conversion ([1869216](https://github.com/antialias/soroban-abacus-flashcards/commit/1869216d2fda77303c0b79d4f613c6dcdaf5324b))
+
+## [4.63.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.2...v4.63.3) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** revert to simple delta positioning to prevent card jumping ([d018b69](https://github.com/antialias/soroban-abacus-flashcards/commit/d018b699c46aea90e9cdc3309e797ff2d7447ecf))
+
+## [4.63.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.1...v4.63.2) (2025-10-21)
+
+
+### Bug Fixes
+
+* **flashcards:** correct pivot point to rotate around card center ([50fc3fd](https://github.com/antialias/soroban-abacus-flashcards/commit/50fc3fdf7f2c9b7412f6d7d890f5e0d52cb86a9b))
+
 ## [4.63.1](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.0...v4.63.1) (2025-10-21)


--- a/apps/web/src/components/InteractiveFlashcards.tsx
+++ b/apps/web/src/components/InteractiveFlashcards.tsx
@@ -81,7 +81,7 @@ export function InteractiveFlashcards() {
      })}
    >
      {cards.map((card) => (
-        <DraggableCard key={card.id} card={card} />
+        <DraggableCard key={card.id} card={card} containerRef={containerRef} />
      ))}
    </div>
  )
@@ -89,9 +89,10 @@ export function InteractiveFlashcards() {

 interface DraggableCardProps {
  card: Flashcard
+  containerRef: React.RefObject<HTMLDivElement>
 }

-function DraggableCard({ card }: DraggableCardProps) {
+function DraggableCard({ card, containerRef }: DraggableCardProps) {
  // Track position - starts at initial, updates when dragged
  const [position, setPosition] = useState({ x: card.initialX, y: card.initialY })
  const [rotation, setRotation] = useState(card.initialRotation) // Now dynamic!
@@ -206,10 +207,46 @@ function DraggableCard({ card }: DraggableCardProps) {
      )
    }

-    // Update card position
+    // Update card position - keep grab point under cursor while rotating
+    // Calculate the rotated grab offset
+    const rotationRad = (clampedRotation * Math.PI) / 180
+    const cosRot = Math.cos(rotationRad)
+    const sinRot = Math.sin(rotationRad)
+
+    // Rotate the grab offset by the current rotation angle
+    const rotatedGrabX = grabOffsetRef.current.x * cosRot - grabOffsetRef.current.y * sinRot
+    const rotatedGrabY = grabOffsetRef.current.x * sinRot + grabOffsetRef.current.y * cosRot
+
+    // Get container bounds for coordinate conversion
+    if (!containerRef.current || !cardRef.current) {
+      // Fallback to simple delta if refs not ready
+      setPosition({
+        x: dragStartRef.current.cardX + deltaX,
+        y: dragStartRef.current.cardY + deltaY,
+      })
+      return
+    }
+
+    const containerRect = containerRef.current.getBoundingClientRect()
+    const cardRect = cardRef.current.getBoundingClientRect()
+
+    // Current cursor position in viewport space
+    const cursorViewportX = e.clientX
+    const cursorViewportY = e.clientY
+
+    // Card center should be at: cursor - rotated grab offset (viewport space)
+    const cardCenterViewportX = cursorViewportX - rotatedGrabX
+    const cardCenterViewportY = cursorViewportY - rotatedGrabY
+
+    // Convert card center from viewport space to container space
+    const cardCenterContainerX = cardCenterViewportX - containerRect.left
+    const cardCenterContainerY = cardCenterViewportY - containerRect.top
+
+    // position.x/y represents translate() which positions the top-left corner
+    // So we need: top-left = center - (width/2, height/2)
    setPosition({
-      x: dragStartRef.current.cardX + deltaX,
-      y: dragStartRef.current.cardY + deltaY,
+      x: cardCenterContainerX - cardRect.width / 2,
+      y: cardCenterContainerY - cardRect.height / 2,
    })
  }

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soroban-monorepo",
-  "version": "4.63.1",
+  "version": "4.63.4",
  "private": true,
  "description": "Beautiful Soroban Flashcard Generator - Monorepo",
  "workspaces": [
Author	SHA1	Message	Date
semantic-release-bot	6d1bad142b	chore(release): 4.63.4 [skip ci] ## [4.63.4](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.3...v4.63.4) (2025-10-21) ### Bug Fixes * flashcards: keep grab point under cursor with proper coordinate conversion ([`1869216`](`1869216d2f`))	2025-10-21 16:28:08 +00:00
Thomas Hallock	1869216d2f	fix(flashcards): keep grab point under cursor with proper coordinate conversion Fixed the issue where cards would slip out from under the cursor when rotating. The grab point now stays perfectly under your cursor throughout the drag. The problem: Simple delta positioning didn't account for rotation causing the grab point to rotate away from the cursor position. The solution: Properly convert between coordinate systems: 1. Calculate rotated grab offset (2D rotation matrix) 2. Determine card center: cursor position - rotated grab offset (viewport space) 3. Convert from viewport coordinates to container coordinates 4. Calculate top-left position from center for CSS translate() Key changes: - Pass containerRef down to DraggableCard components - Get container bounds for viewport→container conversion - Apply rotation matrix to grab offset - Position card so rotated grab point aligns with cursor Now when you grab a card by its edge and drag, the exact point you grabbed stays glued to your cursor while the card rotates around its center. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-21 11:26:54 -05:00
semantic-release-bot	e4ae3aefef	chore(release): 4.63.3 [skip ci] ## [4.63.3](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.2...v4.63.3) (2025-10-21) ### Bug Fixes * flashcards: revert to simple delta positioning to prevent card jumping ([`d018b69`](`d018b699c4`))	2025-10-21 16:22:59 +00:00
Thomas Hallock	d018b699c4	fix(flashcards): revert to simple delta positioning to prevent card jumping Reverted the complex rotation-compensated positioning that was causing cards to jump to the right of the viewport on click. The issue: The previous attempt to keep the grab point "stuck" to the cursor while rotating was mixing screen coordinates with container-relative coords, causing cards to teleport on pointer down. The solution: Use simple delta positioning (cursor movement from drag start) and let CSS handle rotation around the card center. While this means the grab point won't stay perfectly under the cursor as the card rotates, it's much better than cards jumping unexpectedly. The rotation still works - cards rotate based on grab point physics - but the positioning is now stable and predictable. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-21 11:21:49 -05:00
semantic-release-bot	be323bfbc5	chore(release): 4.63.2 [skip ci] ## [4.63.2](https://github.com/antialias/soroban-abacus-flashcards/compare/v4.63.1...v4.63.2) (2025-10-21) ### Bug Fixes * flashcards: correct pivot point to rotate around card center ([`50fc3fd`](`50fc3fdf7f`))	2025-10-21 16:19:23 +00:00
Thomas Hallock	50fc3fdf7f	fix(flashcards): correct pivot point to rotate around card center Fixed issue where cards appeared to pivot around the grab point in viewport space instead of rotating around their own center. The problem: When dragging, the card would stay "pinned" at the grab point in screen space, making it rotate around that viewport location. The solution: As the card rotates, calculate the rotated grab offset and reposition the card so that: 1. The grab point stays under the cursor 2. The card rotates around its own center 3. The visual result feels like the card is "stuck" to your finger Implementation: - Convert rotation angle to radians - Apply 2D rotation matrix to grab offset vector - Calculate card center position: cursor - rotated grab offset - Convert center position to top-left for CSS translate positioning This creates the natural feeling of grabbing and spinning a physical card by its edge. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-21 11:18:04 -05:00