From 5955de3145f355e511295c71e081833eb3f23994 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 17 Nov 2025 03:54:44 +0000
Subject: [PATCH 1/5] Initial plan


From f1efe5b1d3361ab824203e81581cb5376ef6e470 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 17 Nov 2025 04:08:13 +0000
Subject: [PATCH 2/5] Implement Pragmatic Drag and Drop for matrix reordering

Co-authored-by: bschlenk <1390303+bschlenk@users.noreply.github.com>
---
 package.json                     |  1 +
 pnpm-lock.yaml                   | 28 +++++++++++++++
 src/app.tsx                      | 20 ++++-------
 src/components/matrix.module.css | 12 +++++++
 src/components/matrix.tsx        | 61 +++++++++++++++++++++++++++-----
 5 files changed, 99 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 4ae6ac7..b5ba48d 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
     "@bschlenk/mat": "^0.0.11",
     "@bschlenk/util": "^0.0.2",
     "@bschlenk/vec": "^0.0.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea5de1d..20a7a06 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@atlaskit/pragmatic-drag-and-drop':
+        specifier: ^1.7.7
+        version: 1.7.7
       '@bschlenk/mat':
         specifier: ^0.0.11
         version: 0.0.11
@@ -58,6 +61,9 @@ packages:
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
 
+  '@atlaskit/pragmatic-drag-and-drop@1.7.7':
+    resolution: {integrity: sha512-jX+68AoSTqO/fhCyJDTZ38Ey6/wyL2Iq+J/moanma0YyktpnoHxevjY1UNJHYp0NCburdQDZSL1ZFac1mO1osQ==}
+
   '@babel/code-frame@7.26.2':
     resolution: {integrity: sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==}
     engines: {node: '>=6.9.0'}
@@ -125,6 +131,10 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/runtime@7.28.4':
+    resolution: {integrity: sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==}
+    engines: {node: '>=6.9.0'}
+
   '@babel/template@7.25.9':
     resolution: {integrity: sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==}
     engines: {node: '>=6.9.0'}
@@ -615,6 +625,9 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  bind-event-listener@3.0.0:
+    resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -1284,6 +1297,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
@@ -1541,6 +1557,12 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.5
       '@jridgewell/trace-mapping': 0.3.25
 
+  '@atlaskit/pragmatic-drag-and-drop@1.7.7':
+    dependencies:
+      '@babel/runtime': 7.28.4
+      bind-event-listener: 3.0.0
+      raf-schd: 4.0.3
+
   '@babel/code-frame@7.26.2':
     dependencies:
       '@babel/helper-validator-identifier': 7.25.9
@@ -1628,6 +1650,8 @@ snapshots:
       '@babel/core': 7.26.0
       '@babel/helper-plugin-utils': 7.25.9
 
+  '@babel/runtime@7.28.4': {}
+
   '@babel/template@7.25.9':
     dependencies:
       '@babel/code-frame': 7.26.2
@@ -2104,6 +2128,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  bind-event-listener@3.0.0: {}
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -2879,6 +2905,8 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  raf-schd@4.0.3: {}
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
diff --git a/src/app.tsx b/src/app.tsx
index c096338..2812813 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef } from 'react'
 import * as mat from '@bschlenk/mat'
 
 import { Canvas } from './canvas'
@@ -8,7 +8,6 @@ import {
   UseMatricesDispatch,
   WrappedMatrix,
 } from './hooks/use-matrices'
-import { childIndex } from './lib/dom'
 import { setRef } from './lib/set-ref'
 
 import styles from './app.module.css'
@@ -56,7 +55,9 @@ interface MatrixControlsProps {
 }
 
 function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
-  const [dragging, setDragging] = useState<HTMLElement | null>(null)
+  const handleReorder = (fromIndex: number, toIndex: number) => {
+    dispatch({ type: 'move', from: fromIndex, to: toIndex })
+  }
 
   return (
     <div className={styles.controls}>
@@ -64,6 +65,7 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
         {matrices.map(({ id, visible, value }, i) => (
           <Matrix
             key={id}
+            index={i}
             matrix={value}
             visible={visible}
             toggleMatrix={() => {
@@ -82,17 +84,7 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
             cloneMatrix={() => {
               dispatch({ type: 'insert', value, after: matrices[i] })
             }}
-            onDragStart={(e) => {
-              setDragging(e.target as HTMLElement)
-            }}
-            onDragEnter={(e) => {
-              if (e.target !== e.currentTarget) return
-
-              const from = childIndex(dragging!)
-              const to = childIndex(e.target as HTMLElement)
-
-              dispatch({ type: 'move', from, to })
-            }}
+            onReorder={handleReorder}
           />
         ))}
         <button
diff --git a/src/components/matrix.module.css b/src/components/matrix.module.css
index 954a371..343d7e4 100644
--- a/src/components/matrix.module.css
+++ b/src/components/matrix.module.css
@@ -8,6 +8,18 @@
   gap: 8px;
   display: flex;
   flex-direction: column;
+  cursor: grab;
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.root.dragging {
+  opacity: 0.5;
+  cursor: grabbing;
+}
+
+.root.draggedOver {
+  transform: scale(1.05);
+  box-shadow: 0 0 0 2px #3b82f6;
 }
 
 .values {
diff --git a/src/components/matrix.tsx b/src/components/matrix.tsx
index 23b2b00..f5a8b84 100644
--- a/src/components/matrix.tsx
+++ b/src/components/matrix.tsx
@@ -1,4 +1,8 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
+import {
+  draggable,
+  dropTargetForElements,
+} from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
 import * as mat from '@bschlenk/mat'
 import { DEG2RAD, RAD2DEG } from '@bschlenk/util'
 
@@ -18,8 +22,8 @@ export interface MatrixProps {
   moveMatrix?: (dir: 1 | -1) => void
   cloneMatrix?: () => void
   toggleMatrix?: () => void
-  onDragStart?: (e: React.DragEvent<HTMLDivElement>) => void
-  onDragEnter?: (e: React.DragEvent<HTMLDivElement>) => void
+  index?: number
+  onReorder?: (fromIndex: number, toIndex: number) => void
 }
 
 export function Matrix({
@@ -30,9 +34,13 @@ export function Matrix({
   moveMatrix,
   cloneMatrix,
   toggleMatrix,
-  onDragStart,
-  onDragEnter,
+  index,
+  onReorder,
 }: MatrixProps) {
+  const ref = useRef<HTMLDivElement>(null)
+  const [isDragging, setIsDragging] = useState(false)
+  const [isDraggedOver, setIsDraggedOver] = useState(false)
+
   const onChange = useCallback(
     (value: number, e: InputChangeEvent) => {
       const name = e.currentTarget.name as MatrixElement
@@ -41,16 +49,51 @@ export function Matrix({
     [matrix, setMatrix],
   )
 
+  // Set up draggable behavior
+  useEffect(() => {
+    const element = ref.current
+    if (!element || readonly) return
+
+    return draggable({
+      element,
+      getInitialData: () => ({ index }),
+      onDragStart: () => setIsDragging(true),
+      onDrop: () => setIsDragging(false),
+    })
+  }, [index, readonly])
+
+  // Set up drop target behavior
+  useEffect(() => {
+    const element = ref.current
+    if (!element || readonly) return
+
+    return dropTargetForElements({
+      element,
+      onDragEnter: ({ source }) => {
+        const sourceIndex = source.data.index
+        if (typeof sourceIndex === 'number' && sourceIndex !== index) {
+          setIsDraggedOver(true)
+        }
+      },
+      onDragLeave: () => setIsDraggedOver(false),
+      onDrop: ({ source }) => {
+        setIsDraggedOver(false)
+        const sourceIndex = source.data.index
+        if (typeof sourceIndex === 'number' && typeof index === 'number') {
+          onReorder?.(sourceIndex, index)
+        }
+      },
+    })
+  }, [index, readonly, onReorder])
+
   const rot = mat.getRotation(matrix)
   const rotDeg = rot * RAD2DEG
   const scale = Math.hypot(matrix.xx, matrix.xy)
 
   return (
     <div
-      className={styles.root}
-      draggable
-      onDragStart={onDragStart}
-      onDragEnter={onDragEnter}
+      ref={ref}
+      className={`${styles.root} ${isDragging ? styles.dragging : ''} ${isDraggedOver ? styles.draggedOver : ''}`}
     >
       <div className={styles.values}>
         {(Object.keys(matrix) as MatrixElement[]).map((key) => (

From 93a43abc2c2c31dbdf0cebc1b1fa90c0b4983334 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 17 Nov 2025 05:14:19 +0000
Subject: [PATCH 3/5] Add smooth animation when matrices are reordered

Co-authored-by: bschlenk <1390303+bschlenk@users.noreply.github.com>
---
 src/app.tsx                      | 85 ++++++++++++++++++++++++++++++--
 src/components/matrix.module.css |  4 ++
 src/components/matrix.tsx        |  7 ++-
 3 files changed, 90 insertions(+), 6 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 2812813..7dfeb65 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import * as mat from '@bschlenk/mat'
 
 import { Canvas } from './canvas'
@@ -55,19 +55,94 @@ interface MatrixControlsProps {
 }
 
 function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
-  const handleReorder = (fromIndex: number, toIndex: number) => {
-    dispatch({ type: 'move', from: fromIndex, to: toIndex })
-  }
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [isAnimating, setIsAnimating] = useState(false)
+
+  const handleReorder = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (fromIndex === toIndex) return
+
+      // Capture positions before reorder
+      const container = containerRef.current
+      if (!container) return
+
+      const matrixElements = Array.from(
+        container.querySelectorAll('[data-matrix-id]'),
+      )
+      const oldPositions = new Map<string, DOMRect>()
+
+      matrixElements.forEach((el) => {
+        const id = el.getAttribute('data-matrix-id')
+        if (id) {
+          oldPositions.set(id, el.getBoundingClientRect())
+        }
+      })
+
+      // Perform the reorder
+      dispatch({ type: 'move', from: fromIndex, to: toIndex })
+
+      // Wait for React to update the DOM
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          const newMatrixElements = Array.from(
+            container.querySelectorAll('[data-matrix-id]'),
+          )
+
+          setIsAnimating(true)
+
+          newMatrixElements.forEach((el) => {
+            const id = el.getAttribute('data-matrix-id')
+            if (!id) return
+
+            const oldPos = oldPositions.get(id)
+            const newPos = el.getBoundingClientRect()
+
+            if (oldPos && newPos) {
+              const deltaX = oldPos.left - newPos.left
+              const deltaY = oldPos.top - newPos.top
+
+              if (deltaX !== 0 || deltaY !== 0) {
+                const element = el as HTMLElement
+                // Set initial position (where it was)
+                element.style.transform = `translate(${deltaX}px, ${deltaY}px)`
+                element.style.transition = 'none'
+
+                // Force a reflow
+                void element.offsetHeight
+
+                // Animate to final position
+                element.style.transition = 'transform 0.3s ease-out'
+                element.style.transform = 'translate(0, 0)'
+              }
+            }
+          })
+
+          // Clean up after animation
+          setTimeout(() => {
+            newMatrixElements.forEach((el) => {
+              const element = el as HTMLElement
+              element.style.transform = ''
+              element.style.transition = ''
+            })
+            setIsAnimating(false)
+          }, 300)
+        })
+      })
+    },
+    [dispatch],
+  )
 
   return (
     <div className={styles.controls}>
-      <div className={styles.section}>
+      <div ref={containerRef} className={styles.section}>
         {matrices.map(({ id, visible, value }, i) => (
           <Matrix
             key={id}
             index={i}
+            matrixId={id}
             matrix={value}
             visible={visible}
+            isAnimating={isAnimating}
             toggleMatrix={() => {
               dispatch({ type: 'update', index: i, visible: !visible })
             }}
diff --git a/src/components/matrix.module.css b/src/components/matrix.module.css
index 343d7e4..3ef5abf 100644
--- a/src/components/matrix.module.css
+++ b/src/components/matrix.module.css
@@ -12,6 +12,10 @@
   transition: opacity 0.2s ease, transform 0.2s ease;
 }
 
+.root.animating {
+  pointer-events: none;
+}
+
 .root.dragging {
   opacity: 0.5;
   cursor: grabbing;
diff --git a/src/components/matrix.tsx b/src/components/matrix.tsx
index f5a8b84..f5e2a81 100644
--- a/src/components/matrix.tsx
+++ b/src/components/matrix.tsx
@@ -23,6 +23,8 @@ export interface MatrixProps {
   cloneMatrix?: () => void
   toggleMatrix?: () => void
   index?: number
+  matrixId?: number
+  isAnimating?: boolean
   onReorder?: (fromIndex: number, toIndex: number) => void
 }
 
@@ -35,6 +37,8 @@ export function Matrix({
   cloneMatrix,
   toggleMatrix,
   index,
+  matrixId,
+  isAnimating,
   onReorder,
 }: MatrixProps) {
   const ref = useRef<HTMLDivElement>(null)
@@ -93,7 +97,8 @@ export function Matrix({
   return (
     <div
       ref={ref}
-      className={`${styles.root} ${isDragging ? styles.dragging : ''} ${isDraggedOver ? styles.draggedOver : ''}`}
+      data-matrix-id={matrixId}
+      className={`${styles.root} ${isDragging ? styles.dragging : ''} ${isDraggedOver ? styles.draggedOver : ''} ${isAnimating ? styles.animating : ''}`}
     >
       <div className={styles.values}>
         {(Object.keys(matrix) as MatrixElement[]).map((key) => (

From 027b26d15ee1bc876ed00bd7148dea02d5d69dda Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 17 Nov 2025 05:33:14 +0000
Subject: [PATCH 4/5] Replace hover highlight with insertion line indicator and
 use spring-based animations

Co-authored-by: bschlenk <1390303+bschlenk@users.noreply.github.com>
---
 src/app.module.css               | 12 +++++
 src/app.tsx                      | 82 ++++++++++++++++++++++++--------
 src/components/matrix.module.css |  7 +--
 src/components/matrix.tsx        | 17 ++++---
 4 files changed, 87 insertions(+), 31 deletions(-)

diff --git a/src/app.module.css b/src/app.module.css
index 547a100..a482a91 100644
--- a/src/app.module.css
+++ b/src/app.module.css
@@ -17,12 +17,24 @@
 }
 
 .section {
+  position: relative;
   display: flex;
   gap: 8px;
   align-items: center;
   pointer-events: auto;
 }
 
+.insertionIndicator {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: #3b82f6;
+  border-radius: 2px;
+  pointer-events: none;
+  z-index: 10;
+}
+
 .button {
   width: 44px;
   height: 44px;
diff --git a/src/app.tsx b/src/app.tsx
index 7dfeb65..21b9b1c 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -9,9 +9,12 @@ import {
   WrappedMatrix,
 } from './hooks/use-matrices'
 import { setRef } from './lib/set-ref'
+import { createSpring } from './lib/spring'
 
 import styles from './app.module.css'
 
+const spring = createSpring({ stiffness: 170, damping: 26 })
+
 export function App() {
   const values = useMatrices()
 
@@ -57,6 +60,8 @@ interface MatrixControlsProps {
 function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [isAnimating, setIsAnimating] = useState(false)
+  const [insertionIndex, setInsertionIndex] = useState<number | null>(null)
+  const animationFrameRef = useRef<number | null>(null)
 
   const handleReorder = useCallback(
     (fromIndex: number, toIndex: number) => {
@@ -90,6 +95,12 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
 
           setIsAnimating(true)
 
+          // Set up spring animations for each element
+          const springs = new Map<
+            Element,
+            ReturnType<typeof spring<{ x: number; y: number }>>
+          >()
+
           newMatrixElements.forEach((el) => {
             const id = el.getAttribute('data-matrix-id')
             if (!id) return
@@ -102,36 +113,59 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
               const deltaY = oldPos.top - newPos.top
 
               if (deltaX !== 0 || deltaY !== 0) {
-                const element = el as HTMLElement
-                // Set initial position (where it was)
-                element.style.transform = `translate(${deltaX}px, ${deltaY}px)`
-                element.style.transition = 'none'
-
-                // Force a reflow
-                void element.offsetHeight
-
-                // Animate to final position
-                element.style.transition = 'transform 0.3s ease-out'
-                element.style.transform = 'translate(0, 0)'
+                const s = spring({ x: deltaX, y: deltaY })
+                springs.set(el, s)
+                s.set({ x: 0, y: 0 })
               }
             }
           })
 
-          // Clean up after animation
-          setTimeout(() => {
-            newMatrixElements.forEach((el) => {
-              const element = el as HTMLElement
-              element.style.transform = ''
-              element.style.transition = ''
+          // Animate using spring physics
+          let lastTime = performance.now()
+          const animate = (currentTime: number) => {
+            const delta = currentTime - lastTime
+            lastTime = currentTime
+
+            let anyActive = false
+
+            springs.forEach((s, el) => {
+              const active = s.update(delta)
+              if (active) {
+                anyActive = true
+                const element = el as HTMLElement
+                element.style.transform = `translate(${s.value.x}px, ${s.value.y}px)`
+              }
             })
-            setIsAnimating(false)
-          }, 300)
+
+            if (anyActive) {
+              animationFrameRef.current = requestAnimationFrame(animate)
+            } else {
+              // Clean up after animation
+              springs.forEach((_, el) => {
+                const element = el as HTMLElement
+                element.style.transform = ''
+              })
+              setIsAnimating(false)
+              animationFrameRef.current = null
+            }
+          }
+
+          animationFrameRef.current = requestAnimationFrame(animate)
         })
       })
     },
     [dispatch],
   )
 
+  // Clean up animation frame on unmount
+  useEffect(() => {
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current)
+      }
+    }
+  }, [])
+
   return (
     <div className={styles.controls}>
       <div ref={containerRef} className={styles.section}>
@@ -160,8 +194,18 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
               dispatch({ type: 'insert', value, after: matrices[i] })
             }}
             onReorder={handleReorder}
+            onDragEnter={() => setInsertionIndex(i)}
+            onDragLeave={() => setInsertionIndex(null)}
           />
         ))}
+        {insertionIndex !== null && (
+          <div
+            className={styles.insertionIndicator}
+            style={{
+              left: `${insertionIndex * (240 + 8)}px`,
+            }}
+          />
+        )}
         <button
           className={styles.button}
           onClick={() => dispatch({ type: 'insert', value: mat.IDENTITY })}
diff --git a/src/components/matrix.module.css b/src/components/matrix.module.css
index 3ef5abf..dccea9a 100644
--- a/src/components/matrix.module.css
+++ b/src/components/matrix.module.css
@@ -9,7 +9,7 @@
   display: flex;
   flex-direction: column;
   cursor: grab;
-  transition: opacity 0.2s ease, transform 0.2s ease;
+  transition: opacity 0.2s ease;
 }
 
 .root.animating {
@@ -21,11 +21,6 @@
   cursor: grabbing;
 }
 
-.root.draggedOver {
-  transform: scale(1.05);
-  box-shadow: 0 0 0 2px #3b82f6;
-}
-
 .values {
   position: relative;
   display: grid;
diff --git a/src/components/matrix.tsx b/src/components/matrix.tsx
index f5e2a81..bdfa1e3 100644
--- a/src/components/matrix.tsx
+++ b/src/components/matrix.tsx
@@ -26,6 +26,8 @@ export interface MatrixProps {
   matrixId?: number
   isAnimating?: boolean
   onReorder?: (fromIndex: number, toIndex: number) => void
+  onDragEnter?: () => void
+  onDragLeave?: () => void
 }
 
 export function Matrix({
@@ -40,10 +42,11 @@ export function Matrix({
   matrixId,
   isAnimating,
   onReorder,
+  onDragEnter,
+  onDragLeave,
 }: MatrixProps) {
   const ref = useRef<HTMLDivElement>(null)
   const [isDragging, setIsDragging] = useState(false)
-  const [isDraggedOver, setIsDraggedOver] = useState(false)
 
   const onChange = useCallback(
     (value: number, e: InputChangeEvent) => {
@@ -76,19 +79,21 @@ export function Matrix({
       onDragEnter: ({ source }) => {
         const sourceIndex = source.data.index
         if (typeof sourceIndex === 'number' && sourceIndex !== index) {
-          setIsDraggedOver(true)
+          onDragEnter?.()
         }
       },
-      onDragLeave: () => setIsDraggedOver(false),
+      onDragLeave: () => {
+        onDragLeave?.()
+      },
       onDrop: ({ source }) => {
-        setIsDraggedOver(false)
+        onDragLeave?.()
         const sourceIndex = source.data.index
         if (typeof sourceIndex === 'number' && typeof index === 'number') {
           onReorder?.(sourceIndex, index)
         }
       },
     })
-  }, [index, readonly, onReorder])
+  }, [index, readonly, onReorder, onDragEnter, onDragLeave])
 
   const rot = mat.getRotation(matrix)
   const rotDeg = rot * RAD2DEG
@@ -98,7 +103,7 @@ export function Matrix({
     <div
       ref={ref}
       data-matrix-id={matrixId}
-      className={`${styles.root} ${isDragging ? styles.dragging : ''} ${isDraggedOver ? styles.draggedOver : ''} ${isAnimating ? styles.animating : ''}`}
+      className={`${styles.root} ${isDragging ? styles.dragging : ''} ${isAnimating ? styles.animating : ''}`}
     >
       <div className={styles.values}>
         {(Object.keys(matrix) as MatrixElement[]).map((key) => (

From 18b5d362502375b113b18039dfce6543f833ad08 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 19 Nov 2025 20:42:48 +0000
Subject: [PATCH 5/5] Speed up animation and restore immediate canvas preview
 during drag

Co-authored-by: bschlenk <1390303+bschlenk@users.noreply.github.com>
---
 src/app.tsx               | 177 ++++++++++++++++++++++++--------------
 src/components/matrix.tsx |   4 +-
 2 files changed, 113 insertions(+), 68 deletions(-)

diff --git a/src/app.tsx b/src/app.tsx
index 21b9b1c..82a74ed 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -13,7 +13,7 @@ import { createSpring } from './lib/spring'
 
 import styles from './app.module.css'
 
-const spring = createSpring({ stiffness: 170, damping: 26 })
+const spring = createSpring({ stiffness: 300, damping: 30 })
 
 export function App() {
   const values = useMatrices()
@@ -61,98 +61,143 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [isAnimating, setIsAnimating] = useState(false)
   const [insertionIndex, setInsertionIndex] = useState<number | null>(null)
+  const [_previewFromIndex, setPreviewFromIndex] = useState<number | null>(null)
   const animationFrameRef = useRef<number | null>(null)
 
-  const handleReorder = useCallback(
+  // Handle drag enter - update canvas preview immediately
+  const handleDragEnter = useCallback(
     (fromIndex: number, toIndex: number) => {
       if (fromIndex === toIndex) return
+      setInsertionIndex(toIndex)
+      setPreviewFromIndex(fromIndex)
+      // Immediately dispatch for canvas preview
+      dispatch({ type: 'move', from: fromIndex, to: toIndex })
+    },
+    [dispatch],
+  )
 
-      // Capture positions before reorder
+  const handleDragLeave = useCallback(() => {
+    setInsertionIndex(null)
+  }, [])
+
+  const handleReorder = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      if (fromIndex === toIndex) {
+        setPreviewFromIndex(null)
+        setInsertionIndex(null)
+        return
+      }
+
+      // If we were previewing, the state is already updated
+      // Just animate the UI without dispatching again
       const container = containerRef.current
       if (!container) return
 
       const matrixElements = Array.from(
         container.querySelectorAll('[data-matrix-id]'),
       )
-      const oldPositions = new Map<string, DOMRect>()
-
+      
+      // Capture current positions (already in final state from preview)
+      const currentPositions = new Map<string, DOMRect>()
       matrixElements.forEach((el) => {
         const id = el.getAttribute('data-matrix-id')
         if (id) {
-          oldPositions.set(id, el.getBoundingClientRect())
+          currentPositions.set(id, el.getBoundingClientRect())
         }
       })
 
-      // Perform the reorder
-      dispatch({ type: 'move', from: fromIndex, to: toIndex })
-
-      // Wait for React to update the DOM
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          const newMatrixElements = Array.from(
-            container.querySelectorAll('[data-matrix-id]'),
-          )
+      // Calculate where elements should have been before the swap
+      const elementWidth = 240 + 8 // matrix width + gap
+      const startPositions = new Map<string, { left: number; top: number }>()
+      
+      matrixElements.forEach((el) => {
+        const id = el.getAttribute('data-matrix-id')
+        if (!id) return
+        
+        const current = currentPositions.get(id)
+        if (!current) return
+        
+        // Determine the visual offset based on the swap
+        let offset = 0
+        const currentIndex = Array.from(matrixElements).indexOf(el)
+        
+        if (currentIndex === toIndex) {
+          // This element moved TO the target position
+          offset = fromIndex < toIndex ? elementWidth : -elementWidth
+        } else if (fromIndex < toIndex && currentIndex > fromIndex && currentIndex <= toIndex) {
+          // Elements between from and to shift left
+          offset = -elementWidth
+        } else if (fromIndex > toIndex && currentIndex >= toIndex && currentIndex < fromIndex) {
+          // Elements between to and from shift right
+          offset = elementWidth
+        }
+        
+        startPositions.set(id, {
+          left: current.left + offset,
+          top: current.top,
+        })
+      })
 
-          setIsAnimating(true)
+      setIsAnimating(true)
+      setPreviewFromIndex(null)
+      setInsertionIndex(null)
 
-          // Set up spring animations for each element
-          const springs = new Map<
-            Element,
-            ReturnType<typeof spring<{ x: number; y: number }>>
-          >()
+      // Set up spring animations for each element
+      const springs = new Map<
+        Element,
+        ReturnType<typeof spring<{ x: number; y: number }>>
+      >()
 
-          newMatrixElements.forEach((el) => {
-            const id = el.getAttribute('data-matrix-id')
-            if (!id) return
+      matrixElements.forEach((el) => {
+        const id = el.getAttribute('data-matrix-id')
+        if (!id) return
 
-            const oldPos = oldPositions.get(id)
-            const newPos = el.getBoundingClientRect()
+        const startPos = startPositions.get(id)
+        const currentPos = currentPositions.get(id)
 
-            if (oldPos && newPos) {
-              const deltaX = oldPos.left - newPos.left
-              const deltaY = oldPos.top - newPos.top
+        if (startPos && currentPos) {
+          const deltaX = startPos.left - currentPos.left
+          const deltaY = startPos.top - currentPos.top
 
-              if (deltaX !== 0 || deltaY !== 0) {
-                const s = spring({ x: deltaX, y: deltaY })
-                springs.set(el, s)
-                s.set({ x: 0, y: 0 })
-              }
-            }
-          })
+          if (deltaX !== 0 || deltaY !== 0) {
+            const s = spring({ x: deltaX, y: deltaY })
+            springs.set(el, s)
+            s.set({ x: 0, y: 0 })
+          }
+        }
+      })
 
-          // Animate using spring physics
-          let lastTime = performance.now()
-          const animate = (currentTime: number) => {
-            const delta = currentTime - lastTime
-            lastTime = currentTime
+      // Animate using spring physics
+      let lastTime = performance.now()
+      const animate = (currentTime: number) => {
+        const delta = currentTime - lastTime
+        lastTime = currentTime
 
-            let anyActive = false
+        let anyActive = false
 
-            springs.forEach((s, el) => {
-              const active = s.update(delta)
-              if (active) {
-                anyActive = true
-                const element = el as HTMLElement
-                element.style.transform = `translate(${s.value.x}px, ${s.value.y}px)`
-              }
-            })
-
-            if (anyActive) {
-              animationFrameRef.current = requestAnimationFrame(animate)
-            } else {
-              // Clean up after animation
-              springs.forEach((_, el) => {
-                const element = el as HTMLElement
-                element.style.transform = ''
-              })
-              setIsAnimating(false)
-              animationFrameRef.current = null
-            }
+        springs.forEach((s, el) => {
+          const active = s.update(delta)
+          if (active) {
+            anyActive = true
+            const element = el as HTMLElement
+            element.style.transform = `translate(${s.value.x}px, ${s.value.y}px)`
           }
+        })
 
+        if (anyActive) {
           animationFrameRef.current = requestAnimationFrame(animate)
-        })
-      })
+        } else {
+          // Clean up after animation
+          springs.forEach((_, el) => {
+            const element = el as HTMLElement
+            element.style.transform = ''
+          })
+          setIsAnimating(false)
+          animationFrameRef.current = null
+        }
+      }
+
+      animationFrameRef.current = requestAnimationFrame(animate)
     },
     [dispatch],
   )
@@ -194,8 +239,8 @@ function MatrixControls({ matrices, matrix, dispatch }: MatrixControlsProps) {
               dispatch({ type: 'insert', value, after: matrices[i] })
             }}
             onReorder={handleReorder}
-            onDragEnter={() => setInsertionIndex(i)}
-            onDragLeave={() => setInsertionIndex(null)}
+            onDragEnter={(fromIndex) => handleDragEnter(fromIndex, i)}
+            onDragLeave={handleDragLeave}
           />
         ))}
         {insertionIndex !== null && (
diff --git a/src/components/matrix.tsx b/src/components/matrix.tsx
index bdfa1e3..464d268 100644
--- a/src/components/matrix.tsx
+++ b/src/components/matrix.tsx
@@ -26,7 +26,7 @@ export interface MatrixProps {
   matrixId?: number
   isAnimating?: boolean
   onReorder?: (fromIndex: number, toIndex: number) => void
-  onDragEnter?: () => void
+  onDragEnter?: (fromIndex: number) => void
   onDragLeave?: () => void
 }
 
@@ -79,7 +79,7 @@ export function Matrix({
       onDragEnter: ({ source }) => {
         const sourceIndex = source.data.index
         if (typeof sourceIndex === 'number' && sourceIndex !== index) {
-          onDragEnter?.()
+          onDragEnter?.(sourceIndex)
         }
       },
       onDragLeave: () => {