Ablative config

src/components/Workspace.jsx

@@ -1,4 +1,5 @@
 import { useDroppable } from '@dnd-kit/core'
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable'
 import { EQUATION_PRESETS } from '../engine/equations.js'
 import { WorkspaceCard } from './VariableCard.jsx'
 
@@ -13,6 +14,8 @@ export function Workspace({
   getUnit,
   setUnit,
   sciNotation,
+  areaRatioBranch,
+  onToggleAreaRatioBranch,
 }) {
   const { setNodeRef, isOver } = useDroppable({ id: 'workspace' })
 
@@ -57,27 +60,31 @@ export function Workspace({
             </div>
           </div>
         ) : (
-          <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 content-start">
-            {workspaceVarIds.map(varId => (
-              <WorkspaceCard
-                key={varId}
-                varId={varId}
-                userValue={userValues[varId]}
-                solvedInfo={solved[varId]}
-                onRemove={() => onRemove(varId)}
-                onValueChange={val => onValueChange(varId, val)}
-                getUnit={getUnit}
-                onUnitChange={unitId => setUnit(varId, unitId)}
-                sciNotation={sciNotation}
-              />
-            ))}
-            {/* Drop indicator card when dragging over a non-empty workspace */}
-            {isOver && (
-              <div className="rounded-xl border-2 border-dashed border-blue-500 bg-blue-950/30 p-3 flex items-center justify-center text-blue-400 text-sm min-h-[100px]">
-                Drop here
-              </div>
-            )}
-          </div>
+          <SortableContext items={workspaceVarIds} strategy={rectSortingStrategy}>
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 content-start">
+              {workspaceVarIds.map(varId => (
+                <WorkspaceCard
+                  key={varId}
+                  varId={varId}
+                  userValue={userValues[varId]}
+                  solvedInfo={solved[varId]}
+                  onRemove={() => onRemove(varId)}
+                  onValueChange={val => onValueChange(varId, val)}
+                  getUnit={getUnit}
+                  onUnitChange={unitId => setUnit(varId, unitId)}
+                  sciNotation={sciNotation}
+                  areaRatioBranch={areaRatioBranch}
+                  onToggleBranch={onToggleAreaRatioBranch}
+                />
+              ))}
+              {/* Drop indicator card when dragging over a non-empty workspace */}
+              {isOver && (
+                <div className="rounded-xl border-2 border-dashed border-blue-500 bg-blue-950/30 p-3 flex items-center justify-center text-blue-400 text-sm min-h-[100px]">
+                  Drop here
+                </div>
+              )}
+            </div>
+          </SortableContext>
         )}
       </div>
     </main>